{"_id":"tonic-minijs","_rev":"176-05c31bb1b0d4ba15abcdb3ae7d174c21","name":"tonic-minijs","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","dist-tags":{"canary":"1.0.16--canary.25.7b00afb.0","latest":"1.0.20"},"versions":{"1.0.1-canary.6cdf28f.0":{"name":"tonic-minijs","version":"1.0.1-canary.6cdf28f.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.6cdf28f.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"7675b1863474fefbb8887834568b26250c970b4b","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.6cdf28f.0.tgz","fileCount":3,"integrity":"sha512-VIbBC2tcZSymG1I042qYk6aiU1zimC3LBWwQmUkK31cr0BHlBCsthxDw0UNRxVaYy/8LGQ8rWbUqmNcYIeh4kQ==","signatures":[{"sig":"MEYCIQDp/wj6xKFI5OcuoFtPYnFEIlHr7ghr34TmOMyff4VaZgIhAK17EB/1lcEh4VE6x//BtSq31xVLoJISWYOslMst5UAX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9362},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"6cdf28fdeb8e74ec4acd7e7f2826fae2cc48497d","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","directories":{},"_nodeVersion":"16.20.1","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.6cdf28f.0_1691996505368_0.9126924654742647","host":"s3://npm-registry-packages"}},"1.0.1-canary.c0546f6.0":{"name":"tonic-minijs","version":"1.0.1-canary.c0546f6.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.c0546f6.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"49032da0a8bf6da342f162c198d107484b3bd002","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.c0546f6.0.tgz","fileCount":3,"integrity":"sha512-2f1B/Ul0PjG7m+8QfwRlFCt7JkFe16EoyUdU3WiSdCinU73sqJhW0oPqsnh4zKy5AwvCTSVvDiHTqbnNGvBfvA==","signatures":[{"sig":"MEUCIQC1vjlDcyUSLVOPeOs3Vc7PwplL2lRrD7b4acv+u1fijgIgbledD3vwwn3be9mJaW7Ou4nEfpaceP1ppEClxbs5WVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13247},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"ERROR: No README data found!","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"c0546f69b4b92157fd7fd6dcf37eb75a311cf67c","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","directories":{},"_nodeVersion":"16.20.1","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.c0546f6.0_1692085100421_0.46141541560225785","host":"s3://npm-registry-packages"}},"1.0.1-canary.0db6f78.0":{"name":"tonic-minijs","version":"1.0.1-canary.0db6f78.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.0db6f78.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"cc05cc6f5c4a55316c4669d027bc320a3645945d","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.0db6f78.0.tgz","fileCount":3,"integrity":"sha512-quLYSH5cPMSVYEKSokoGZ/vBAJLZchcvo2D331/GU3dOXFtIVR5QGkmSmUf83yqwhAM9A42cJKo2jNHDSMizIA==","signatures":[{"sig":"MEUCIAy/vrBZU+XN3Mzs778njb0d8BhLwLG5leSSyRvnV8PAAiEAnRpDuB001eDKAd0abqjg341iNU6voM/cOipDwbPdUyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13216},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"ERROR: No README data found!","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"0db6f7888bea4b8273b0d4c5cddf0c0ea6cc7368","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","directories":{},"_nodeVersion":"16.20.1","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.0db6f78.0_1692085903279_0.7871215293001614","host":"s3://npm-registry-packages"}},"1.0.1-canary.7fe4c96.0":{"name":"tonic-minijs","version":"1.0.1-canary.7fe4c96.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.7fe4c96.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"2d473a3d891ad87dec15d6c448880f7d44f78b65","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.7fe4c96.0.tgz","fileCount":4,"integrity":"sha512-Xgc9XQZiZNa+CWEPcCM6i7fRNQJmLbA7CJH0P3pzwebjLN0kTQ0mncT9s7CDl8LQRzErpP9Fa0SjaoRMamhq7g==","signatures":[{"sig":"MEQCIGUAC2b9a+LzhVqj291v8grX5hSr4TEb/wGvIzyfjvEdAiAh7WSA56kRKqELTYZpNmGFNQPT/Zg/kOT+InTxt8HKaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16955},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new patterns and concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Docs\n\n#### Actions\n- :click\n- :clickout\n- :change\n- :enter\n- :keypress\n- :keydown\n- :keyup\n\n#### Setters\n- :value\n - Set the value of a form input to a js variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- :class\n - Set the class of any dom element based on the value of a js variable.\n- :text\n - Set the text of any dom element based on the value of a js variable.\n\n#### Other\n- :each \n\n#### Variable Methods\n- search\n- toggle\n- add \n- remove\n- first\n- last\n\n## Tips\n- Use `this.value` to get the value of the current form\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"7fe4c96bbb961da3075f8618c90ed36ca82560e6","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.1","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.7fe4c96.0_1692255216100_0.04866062639810442","host":"s3://npm-registry-packages"}},"1.0.1-canary.b64453f.0":{"name":"tonic-minijs","version":"1.0.1-canary.b64453f.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.b64453f.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"cf61d289c748c1a67a4805f29d436ac0765195c5","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.b64453f.0.tgz","fileCount":4,"integrity":"sha512-fcQt1X1zGfKXwZoloLbl3WIUTP+1akTTfzaq9SmOOkHovvSbvNKxyoEHOtu2cl+aYAPLaIVudY+yDLE5H8srXg==","signatures":[{"sig":"MEYCIQCVPeD8+yOZWL/2GlTVH96Pt4MKr7jP2IBnodw//2EPaAIhAO7wkEMH3zN7R8ryB4zZjZbF1gnU69e51gENFQKe8NoF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20535},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new patterns and concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Docs\n\n#### Actions\n- :click\n- :clickout\n- :change\n- :enter\n- :keypress\n- :keydown\n- :keyup\n\n#### Setters\n- :value\n - Set the value of a form input to a js variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- :class\n - Set the class of any dom element based on the value of a js variable.\n- :text\n - Set the text of any dom element based on the value of a js variable.\n\n#### Other\n- :each \n\n#### Variable Methods\n- search\n- toggle\n- add \n- remove\n- first\n- last\n\n## Tips\n- Use `this.value` to get the value of the current form\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"b64453f8741db5df7bd31aac300830f07701162c","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.b64453f.0_1692692057157_0.1819223684928324","host":"s3://npm-registry-packages"}},"1.0.1-canary.2387020.0":{"name":"tonic-minijs","version":"1.0.1-canary.2387020.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.2387020.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"8f3aeeb60340a7aec57e3465b443031e2194a851","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.2387020.0.tgz","fileCount":4,"integrity":"sha512-2iuRGlr9x7SDA3k4Njs8UNs2ovuad3TmDrNsRyrRkhVu+KJgRaYWzab3KfFQfBfpnBow94XCBwwlR0otV22WIg==","signatures":[{"sig":"MEUCIC5UfNoUPVVqM/czWWMcgXlDm23Z4cxnDZj5tVHzrQdiAiEAnheEX9uUPCputSo22P+Es6kUn2YuXL0RQIXeL5yfQiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20978},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\nSet state with \n\nSet variables with vanilla JS\n```\n\n```\n\n#### Syncing the dom with your state\n- :value\n - Set the value of a form input to a js variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- :class\n - Set the class of any dom element based on the value of a js variable.\n- :text\n - Set the text of any dom element based on the value of a js variable.\n\n#### Other\n- :each \n\n#### Variable Methods\n- search\n- toggle\n- add \n- remove\n- first\n- last\n\n## Tips\n- Use `this.value` to get the value of the current form\n\n\n#### Actions\n- :click\n- :clickout\n- :change\n- :enter\n- :keypress\n- :keydown\n- :keyup","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"23870207634b3219cfba3fcdcf11f7c14a47be0e","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.2387020.0_1696379021284_0.3679333975191159","host":"s3://npm-registry-packages"}},"1.0.1-canary.174fecc.0":{"name":"tonic-minijs","version":"1.0.1-canary.174fecc.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.174fecc.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"bdf2217eb9746c0544326148328aa81bb9924d6a","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.174fecc.0.tgz","fileCount":4,"integrity":"sha512-z+0Zv+077J4T+KdytMAZk66EQZxjiSPHwNQ6vU/+KQkZXllKv+u118RjmFySuRitjyvJUYP1/FLPWrNKJRDp5g==","signatures":[{"sig":"MEUCID53bcWkjIALayRtmfJhugiZZmg1/1y/FwwMeRcECCr6AiEA3dflayVTOeJUzQD0X1paBP9SSIc/VXwMq5RyQ9MZlG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20910},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\nSet state with \n\nSet variables with vanilla JS\n```\n\n```\n\n#### Syncing the dom with your state\n- :value\n - Set the value of a form input to a js variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- :class\n - Set the class of any dom element based on the value of a js variable.\n- :text\n - Set the text of any dom element based on the value of a js variable.\n\n#### Other\n- :each \n\n#### Variable Methods\n- search\n- toggle\n- add \n- remove\n- first\n- last\n\n## Tips\n- Use `this.value` to get the value of the current form\n\n\n#### Actions\n- :click\n- :clickout\n- :change\n- :enter\n- :keypress\n- :keydown\n- :keyup","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"174fecc60396b0e6e9acb594cf9f40d454fdbb7d","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.174fecc.0_1696379831539_0.5195329508780107","host":"s3://npm-registry-packages"}},"1.0.2-canary.6674109.0":{"name":"tonic-minijs","version":"1.0.2-canary.6674109.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.6674109.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"070afb28e26057f4dfb4edd08fa1c6d764f6c298","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.6674109.0.tgz","fileCount":4,"integrity":"sha512-gTIKmKRAAPlJqzyQOr/uaeFO5+cyNO/VJbXlJod88kH4Tang1uFIamu2suZws0rc6O2N5tfQl9ljds4Dsjzm3A==","signatures":[{"sig":"MEYCIQDBAIOcjPq++dWNcAoflRWjEV+NkEZYlOMFrByptC+HBwIhAKVe6ihHCubgK+RZLH+rqWwjDqzt7V3PSXk0tykrVfxo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20910},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\nSet state with \n\nSet variables with vanilla JS\n```\n\n```\n\n#### Syncing the dom with your state\n- :value\n - Set the value of a form input to a js variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- :class\n - Set the class of any dom element based on the value of a js variable.\n- :text\n - Set the text of any dom element based on the value of a js variable.\n\n#### Other\n- :each \n\n#### Variable Methods\n- search\n- toggle\n- add \n- remove\n- first\n- last\n\n## Tips\n- Use `this.value` to get the value of the current form\n\n\n#### Actions\n- :click\n- :clickout\n- :change\n- :enter\n- :keypress\n- :keydown\n- :keyup","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"667410941aa8cca3fe154b654631ea17487abf94","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.6674109.0_1696380499444_0.5432328637574642","host":"s3://npm-registry-packages"}},"1.0.2-canary.921427a.0":{"name":"tonic-minijs","version":"1.0.2-canary.921427a.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.921427a.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"daddf54043fb2fa41e3dfec40bd693879958d292","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.921427a.0.tgz","fileCount":4,"integrity":"sha512-dYHLE/wI1DeJYqvHpeQEh7NVMx3X/Gi9GetZhvhogBEuUnpN1rU7r4JLih5VIJTM4YZu7VQT8QB8ajP6b+Ra3g==","signatures":[{"sig":"MEUCIQDffXLwai+ESTH6HtrDObV2SUjE/IUdTQavSjw0y2Ov+AIgcagoh+kViN6PwQ1qCZfbcnXaZ4KfV3QB6JDjuc3xVSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22512},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\nSet state with \n\nSet variables with vanilla JS\n```\n\n```\n\n#### Syncing the dom with your state\n- :value\n - Set the value of a form input to a js variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- :class\n - Set the class of any dom element based on the value of a js variable.\n- :text\n - Set the text of any dom element based on the value of a js variable.\n\n#### Statements\n- :each - loop through an array and render a template for each item\n\n#### Variable Methods\n\n##### Array\n- search\n- toggle\n- add \n- remove\n- first\n- last\n\n## Tips\n- Use `this.value` to get the value of the current form\n\n### Native Events\n- All native events are supported. You can use them like this:\n\n```html\n\n
\n```\n\n- For `:load` events, it will fire immediately after MiniJS is initialized.\n\n#### Custom Events\n- :clickout\n- :change\n- :enter\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"921427ad672bcc6307ad70bf9522a7ffeb0e26b9","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.921427a.0_1697127647952_0.3321949063670182","host":"s3://npm-registry-packages"}},"1.0.2-canary.85bbd3a.0":{"name":"tonic-minijs","version":"1.0.2-canary.85bbd3a.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.85bbd3a.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"fb2d573a7403f94cbf6e402c659a8feee5aa5eb6","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.85bbd3a.0.tgz","fileCount":4,"integrity":"sha512-t9khXfm2ObzTbqxomNKQ4oVfCQOTIFPwU9JF/SBPcmtjV4j8qa+upizJ+oTBOff67Kc1WaxyMCJJqNs+7KLd/w==","signatures":[{"sig":"MEUCIQC8cXu4LQyAMsNO6U5tIbUEq54JMuDaW51nwbJ91VvgmgIgaS6gPwRAbCus1df7ipKrul4o2/4TA1r8VH9QGDiybXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22512},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\nSet state with \n\nSet variables with vanilla JS\n```\n\n```\n\n#### Syncing the dom with your state\n- :value\n - Set the value of a form input to a js variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- :class\n - Set the class of any dom element based on the value of a js variable.\n- :text\n - Set the text of any dom element based on the value of a js variable.\n\n#### Statements\n- :each - loop through an array and render a template for each item\n\n#### Variable Methods\n\n##### Array\n- search\n- toggle\n- add \n- remove\n- first\n- last\n\n## Tips\n- Use `this.value` to get the value of the current form\n\n### Native Events\n- All native events are supported. You can use them like this:\n\n```html\n\n
\n```\n\n- For `:load` events, it will fire immediately after MiniJS is initialized.\n\n#### Custom Events\n- :clickout\n- :change\n- :enter\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"85bbd3ace9b3c217873525130c345bd2a95d8e5a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.85bbd3a.0_1697528361075_0.9474989506542331","host":"s3://npm-registry-packages"}},"1.0.2-canary.1fc8ad4.0":{"name":"tonic-minijs","version":"1.0.2-canary.1fc8ad4.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.1fc8ad4.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"7301e1ce29eaab9db117ddf0cfb728c37a990048","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.1fc8ad4.0.tgz","fileCount":4,"integrity":"sha512-7248G7/ijW6K/8Wj4cDn/A4/d7jNkIlJdWWlqXHgFupZcqJ7L4EtuhUzTMw8eYg+//YETx2P0+n14HFoVYuiWQ==","signatures":[{"sig":"MEQCIHAhNkobAyiHCrnu/f0nv0LEHNd3KnC67NIehKRSDsSZAiAhCOoWFKlxjgGBpVR5R/38R506b6Yrhvi/tSrbffVhiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22512},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\nSet state with \n\nSet variables with vanilla JS\n```\n\n```\n\n#### Syncing the dom with your state\n- :value\n - Set the value of a form input to a js variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- :class\n - Set the class of any dom element based on the value of a js variable.\n- :text\n - Set the text of any dom element based on the value of a js variable.\n\n#### Statements\n- :each - loop through an array and render a template for each item\n\n#### Variable Methods\n\n##### Array\n- search\n- toggle\n- add \n- remove\n- first\n- last\n\n## Tips\n- Use `this.value` to get the value of the current form\n\n### Native Events\n- All native events are supported. You can use them like this:\n\n```html\n\n
\n```\n\n- For `:load` events, it will fire immediately after MiniJS is initialized.\n\n#### Custom Events\n- :clickout\n- :change\n- :enter\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"1fc8ad4a9e63e84573b497b4f1e82f7d54df9282","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.1fc8ad4.0_1697543609648_0.0231922390716226","host":"s3://npm-registry-packages"}},"1.0.2-canary.8b6c3bf.0":{"name":"tonic-minijs","version":"1.0.2-canary.8b6c3bf.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.8b6c3bf.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"d6fb18fc5ca83982cbb7dc016a1f26fd589956af","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.8b6c3bf.0.tgz","fileCount":4,"integrity":"sha512-ZrNCc1LUb/2ryZ2fZNPZdGzA3gu0BTM/LNpXalmyqpyD8GtTevVfoARLT8R1e/+iJM9QKq8SlZ1TeLIZEkcCnw==","signatures":[{"sig":"MEQCICBseWLNrwuZ34w9+0hb7PyIttMSgxzaz/bjWRvXQfVbAiBnGPv5VQ0WYMTYLm1GcJhToTm7k0whE6gN+K+8OJFaxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28634},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\nSet state with \n\nSet variables with vanilla JS\n```\n\n```\n\n#### Syncing the dom with your state\n- :value\n - Set the value of a form input to a js variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- :class\n - Set the class of any dom element based on the value of a js variable.\n- :text\n - Set the text of any dom element based on the value of a js variable.\n\n#### Statements\n- :each - loop through an array and render a template for each item\n\n#### Variable Methods\n\n##### Array\n- search\n- toggle\n- add \n- remove\n- first\n- last\n\n## Tips\n- Use `this.value` to get the value of the current form\n\n### Native Events\n- All native events are supported. You can use them like this:\n\n```html\n\n
\n```\n\n- For `:load` events, it will fire immediately after MiniJS is initialized.\n\n#### Custom Events\n- :clickout\n- :change\n- :enter\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"8b6c3bfe1221216caf677b091f8d73991007a79c","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.8b6c3bf.0_1697600639754_0.5943002873053822","host":"s3://npm-registry-packages"}},"1.0.2-canary.03b86a9.0":{"name":"tonic-minijs","version":"1.0.2-canary.03b86a9.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.03b86a9.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"b7fd5de1c16e81b7c199bd143b82ddca350025cc","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.03b86a9.0.tgz","fileCount":4,"integrity":"sha512-x30nqI1k0BTBfjMaMCRoho+NzxE5J4Usz0jcxT1r7GM0dy70Ga9V+oag66v3NnufpkTouQy4PP664ziAZmXqNQ==","signatures":[{"sig":"MEUCID3tXxmI884IsJfP4neAzbF9AOEYM5/J1dLCy4I1URq9AiEA8fK1s/Y1oedTUXCzGJgq+CcsOz2QBSCKf/dpcn372s8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29529},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\nSet state with \n\nSet variables with vanilla JS\n```\n\n```\n\n#### Syncing the dom with your state\n- :value\n - Set the value of a form input to a js variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- :class\n - Set the class of any dom element based on the value of a js variable.\n- :text\n - Set the text of any dom element based on the value of a js variable.\n\n#### Statements\n- :each - loop through an array and render a template for each item\n\n#### Variable Methods\n\n##### Array\n- search\n- toggle\n- add \n- remove\n- first\n- last\n\n## Tips\n- Use `this.value` to get the value of the current form\n\n### Native Events\n- All native events are supported. You can use them like this:\n\n```html\n\n
\n```\n\n- For `:load` events, it will fire immediately after MiniJS is initialized.\n\n#### Custom Events\n- :clickout\n- :change\n- :enter\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"03b86a9f36c9fb2ad626354a1a517bcf085bf926","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.03b86a9.0_1699339784294_0.6788486307414558","host":"s3://npm-registry-packages"}},"1.0.2-canary.310b96a.0":{"name":"tonic-minijs","version":"1.0.2-canary.310b96a.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.310b96a.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"6de4f0f6af8f6f55222195ed5fd2576e758de46a","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.310b96a.0.tgz","fileCount":4,"integrity":"sha512-g9Xix/4V4aWxlthlZDGE011CWShhnBLbWeJJsYep/hxw1eAQ8Opchs5usOZF+2sEC9bCHKl6RqguyZtkH1pE2A==","signatures":[{"sig":"MEUCIGvez8tImoxCF01iMbuEdDJmVKYUsz2wvhzNRKCO3X0iAiEA73mfmmUQiE9h3LiCOv+InaZTEd0sM4iXgiFIW6Skdvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31870},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable Methods\n\nMiniJS adds some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first()`\n- `last` - returns the last item in the array.\n Usage: `array.last()`\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove(\"Chocolates\")\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove(\"Chocolates\")\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"310b96afcc0d95840f3dd2299211a4b35e3dafc9","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.310b96a.0_1699343003069_0.8213506307905691","host":"s3://npm-registry-packages"}},"1.0.2-canary.0c7d7bc.0":{"name":"tonic-minijs","version":"1.0.2-canary.0c7d7bc.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.0c7d7bc.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"991951c2052e9b30fbe64e36e64a172df269acb7","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.0c7d7bc.0.tgz","fileCount":4,"integrity":"sha512-3d9rFy4SpsmAaMAA35V8Fu8kqySNbvXIsuEssegB8h2JYzPdy6FAcl3xVsv6V6rbBOSYXd3fPk/5k7LoS7U3zg==","signatures":[{"sig":"MEUCIQDgsX89FgKTFH7O6abV1OfDkfQNuFjoPX/joPOt2CtkKgIgbm8PIBgiJDKBVsAv7aJUnwbDJKiWpSV7bmtfVPK1v0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32570},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first()`\n- `last` - returns the last item in the array.\n Usage: `array.last()`\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove(\"Chocolates\")\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove(\"Chocolates\")\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"0c7d7bc0d2febde1a954a679b2bcb5f390a5c1c9","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.0c7d7bc.0_1699345539644_0.4937170474136141","host":"s3://npm-registry-packages"}},"1.0.2-canary.5098f23.0":{"name":"tonic-minijs","version":"1.0.2-canary.5098f23.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.5098f23.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"fa798ff321e476631a396f52b2538467c4976c95","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.5098f23.0.tgz","fileCount":4,"integrity":"sha512-UhC6bqFlUKydDYqeVnkUyJJsACCfkyqljdDuM974Y5Z40QxSTYK+WRfqeyqBkQTYHdjZgssnzP1/SbmZQJ+gZg==","signatures":[{"sig":"MEYCIQD0PVKtp5zFfIeAT/wPINeptgfExcqxnFTHCkExWSJZNwIhAK/kN0qEPviaCHFHuiHNBdgfWWS+HsK5rA165RkC48Zg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32536},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first()`\n- `last` - returns the last item in the array.\n Usage: `array.last()`\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove(\"Chocolates\")\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove(\"Chocolates\")\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"5098f239bf4f407bba54eaa1e8d5ece041eb293b","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.5098f23.0_1699348619849_0.4650620219356214","host":"s3://npm-registry-packages"}},"1.0.2-canary.3d1e9e4.0":{"name":"tonic-minijs","version":"1.0.2-canary.3d1e9e4.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.3d1e9e4.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"a3b38c17e5f1b5aa2c9937403454f34c2a94dbc2","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.3d1e9e4.0.tgz","fileCount":4,"integrity":"sha512-Y8pLo22GV5t1+o+lODS/099MySndpd9ZD2gyZY1tvSMwwrsI2Snx5NWFNm0ConBFGyPJnAV1KsyWZuZM8wL29w==","signatures":[{"sig":"MEUCIFd5ulZnTpgvcl47BTYqZP1V1EXSQpvJBq94E3g1KCgsAiEAwW+TqDfekVUwGfDsazb3IJR2Y4SS6uzOmkMrxWm2gmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32536},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first()`\n- `last` - returns the last item in the array.\n Usage: `array.last()`\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove(\"Chocolates\")\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove(\"Chocolates\")\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"3d1e9e48dad077aa205d52d30c8b3b83b6ee4ae4","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.3d1e9e4.0_1699348980155_0.0645954492020846","host":"s3://npm-registry-packages"}},"1.0.2-canary.bee500d.0":{"name":"tonic-minijs","version":"1.0.2-canary.bee500d.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.bee500d.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"7cad8aa5b59cf37c8b0492af886f8d2290224c4c","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.bee500d.0.tgz","fileCount":4,"integrity":"sha512-LkymcP7l6an19tzxPp0Aw64FR9A0Q66oyY2wkuusiKe63iLev3qJTwmgs6wXLKUNXYKnQRj5kXs0sXeYioOAiw==","signatures":[{"sig":"MEQCIFXa+ygPm8DBnWUgsRluzcpUZLe7OQims5d1ihZNfaFfAiBA50BkSE/TSn8undo0zVd5AslWAiu6ZgKepTE8LCURuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33880},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first()`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last()`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextOf` - gets the next item in the array.\n Usage: `array.nextOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextOf('Tag 2') // returns 'Tag 3'\n ```\n- `previousOf` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextOf('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"bee500d21157c7946782d77c3e73731f0a637434","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.bee500d.0_1699352236011_0.058801669446003846","host":"s3://npm-registry-packages"}},"1.0.2-canary.1.2022f91.0":{"name":"tonic-minijs","version":"1.0.2-canary.1.2022f91.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.1.2022f91.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"497b20dcbbbba7dbaeb55c130971a9cb1635b474","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.1.2022f91.0.tgz","fileCount":4,"integrity":"sha512-2mVDtDy6VdifNrJZMWPsFybA/1bn2QJeULQXY85oSDviW1wC85V+2Bwo161C3CpdPAEEA7bhuFCKDHjnaZo+JQ==","signatures":[{"sig":"MEUCIBQrYf5r+4VX4UB7PtTDPyUDe0Sn6XDOEcoo6PFbALCEAiEA2jfyba0L+lbx/PWfIryCUJaJBpzKP0Jli9YZi8vQa/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33878},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextOf` - gets the next item in the array.\n Usage: `array.nextOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextOf('Tag 2') // returns 'Tag 3'\n ```\n- `previousOf` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextOf('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"2022f91b9b522ddefcaa242a62a19324e5d8db76","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.1.2022f91.0_1699352660720_0.7318547549227528","host":"s3://npm-registry-packages"}},"1.0.2-canary.1.0312ba6.0":{"name":"tonic-minijs","version":"1.0.2-canary.1.0312ba6.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.1.0312ba6.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"1623e5454eeb0342fa76c955c966f2cdf704d566","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.1.0312ba6.0.tgz","fileCount":4,"integrity":"sha512-J7vlYQ91lGXWkoodwzOpGxZ6YcoOsJaHwyAMbY+vH5/bLsMcwb386Od5LRtl4VAdIhoA4Rckbbr0vwSVS/S2Lg==","signatures":[{"sig":"MEYCIQClkP8vn6pDz5XDwhiR2LLUcTeJ2IncxIrsGZdopzIZiQIhAJOih1OjVgF3WELztf4wXoje0T8ZCV/THaUDLBsG8E13","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33878},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextOf` - gets the next item in the array.\n Usage: `array.nextOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextOf('Tag 2') // returns 'Tag 3'\n ```\n- `previousOf` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextOf('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"0312ba6e99026dfd4890fdbda1a4bec6e0616fb2","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.1.0312ba6.0_1699352719549_0.6883752720540028","host":"s3://npm-registry-packages"}},"1.0.2-canary.1ef9a54.0":{"name":"tonic-minijs","version":"1.0.2-canary.1ef9a54.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.1ef9a54.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"abe84d3481c1839b975d2688625e73ec24b432d8","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.1ef9a54.0.tgz","fileCount":4,"integrity":"sha512-U2eHfOBDCkSD7R05cN1Nlni8W1YANSIXRSFp11Wh5dUGIK1UJc5Bm3thT8GON39M6so+zjcf+Z4kSdnl74ohmA==","signatures":[{"sig":"MEQCIGnfEj3kDTgaAAeHrt/ttap41XoSPTE1nprMoB6zI+ndAiAf4TwvboxMc57wJog5ci+T3lnMgH3GZs3pRlUnc8e1HQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33880},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextOf` - gets the next item in the array.\n Usage: `array.nextOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextOf('Tag 2') // returns 'Tag 3'\n ```\n- `previousOf` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousOf('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"1ef9a54ac39064b9ef3c2b80fced64812b20a3d6","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.1ef9a54.0_1699353160838_0.1594607701871522","host":"s3://npm-registry-packages"}},"1.0.2-canary.b2d7bc9.0":{"name":"tonic-minijs","version":"1.0.2-canary.b2d7bc9.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.b2d7bc9.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"8d3646eaed01695681dd4d79445780d4eec61d2c","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.b2d7bc9.0.tgz","fileCount":4,"integrity":"sha512-9PV3Kr2sAVYPtTWf3FYbjAlnPjgQoFwTOis7wreLW06ZAwhiIEQq6A60OaN5JXQN8G7hYU6U57W5+MWknRspXg==","signatures":[{"sig":"MEYCIQDTCAzGBEvYL+LiSBfaBbVFdlERNxRJcIeZ410rZZOQNQIhAL+iouoEuXXJPhwHSqUODorMZ8JxNuCbwb1ygYDI125T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33880},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextOf` - gets the next item in the array.\n Usage: `array.nextOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextOf('Tag 2') // returns 'Tag 3'\n ```\n- `previousOf` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousOf('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"b2d7bc93358c8af5ebe46f51e1184fad97066bf9","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.b2d7bc9.0_1699354117648_0.6216446895523773","host":"s3://npm-registry-packages"}},"1.0.2-canary.651ed1d.0":{"name":"tonic-minijs","version":"1.0.2-canary.651ed1d.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.651ed1d.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"11dee54de5a90f1eecb3442283e58b418e9b8b98","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.651ed1d.0.tgz","fileCount":4,"integrity":"sha512-Cls60Q0cElCvJQNBS+PbAnaFgxcDtc74giP11ybjrMplq9rSva0KPj9wY0g7UVT/Smt4ihQuwp0u6a+QZ6p67Q==","signatures":[{"sig":"MEUCIQCHF1LZIuzanDrspxMnN+/Mfpi+PfrqoWOkDC5dF5SffwIgXCiGurSmTJovDRP/5rjkDqSYys6VX4d/8kg2cyvBg3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33880},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextOf` - gets the next item in the array.\n Usage: `array.nextOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextOf('Tag 2') // returns 'Tag 3'\n ```\n- `previousOf` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousOf('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"651ed1d4ac270af5ce1241d83a14718312092411","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.651ed1d.0_1699505747992_0.5334202792465499","host":"s3://npm-registry-packages"}},"1.0.2-canary.049e353.0":{"name":"tonic-minijs","version":"1.0.2-canary.049e353.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.049e353.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"f4c6d590667de5f995df5a8afd3bc6fd6a3dd58e","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.049e353.0.tgz","fileCount":4,"integrity":"sha512-Cl69MBky0Kl0Vqz3mpi00I5XFjL816mmGZxWlw6+Ef6QNaWMO9dBD8b0/Bb4C5NcOZ5hoxlFzWs+AUpEhFKUJQ==","signatures":[{"sig":"MEUCIHht5pgFE7CG6QhJugP/WOAw/D0tZAMC00b6hV5NZvsIAiEAr6JdRH8IATFc3TgTXjQw1GEJ963KL4uSRYI4SNJEFTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35602},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextOf` - gets the next item in the array.\n Usage: `array.nextOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextOf('Tag 2') // returns 'Tag 3'\n ```\n- `previousOf` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousOf('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"049e353abd18c0e3cddbcd2c096322a8e8a87d5d","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.049e353.0_1699519937086_0.9500509240845847","host":"s3://npm-registry-packages"}},"1.0.2-canary.aca1db9.0":{"name":"tonic-minijs","version":"1.0.2-canary.aca1db9.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.aca1db9.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"bd18b1e6856008f73eba5daab532ac51c7228ceb","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.aca1db9.0.tgz","fileCount":4,"integrity":"sha512-27HpN4qITzHCNYtNAgODcMSsNtg+xZZFN1GoihgjnQItwWT7MuP01lDqtcH7gw485q2IyEDvVOq3aTIRelvbwg==","signatures":[{"sig":"MEQCIFuMc3i/ZC+awGMHmpbbuJ9yq7T/wiaI0iKhYUau0wT+AiB1FUKMhZixQ4nsKm6MdUuBDWMuRQ0J/W//ded6ZFOzvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35620},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"aca1db9b9e37901a4594bc8ab2c23a08ff7a4881","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.aca1db9.0_1699524914309_0.40614020672103224","host":"s3://npm-registry-packages"}},"1.0.2-canary.2.b55e1ca.0":{"name":"tonic-minijs","version":"1.0.2-canary.2.b55e1ca.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2-canary.2.b55e1ca.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"d3978c06f6bf1ddca7c5336cc97020d89d305b2a","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2-canary.2.b55e1ca.0.tgz","fileCount":4,"integrity":"sha512-U87+8DaZMt7/RZWLRZugiM1bXs5hs8iI0AsYKGrOEgvse6GczQ+YP/Y2v56iVZ6cp/vKbyrOj7izQLM8otTAdA==","signatures":[{"sig":"MEYCIQD/xak6ls6XvEVMGcl54W4ltYY55xmTuT8irhr/g0mpuQIhAIxXGpUuvuo2euIgLPgT4LPB2J8PiISVbEQ13MrBV1+g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35622},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"b55e1caf50eab6dde54c6d6ac5da01a78e93f1c0","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2-canary.2.b55e1ca.0_1699527819906_0.40282525500310284","host":"s3://npm-registry-packages"}},"1.0.1-canary.8e65766.0":{"name":"tonic-minijs","version":"1.0.1-canary.8e65766.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.8e65766.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"bdc7be5fa69a1140371db20340487c7940b413f8","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.8e65766.0.tgz","fileCount":4,"integrity":"sha512-Hwcj/O098upaOOfaRruKI4Has/fP9hCghO7+VtkyZXTfhkHlLm/hGJfic+C7y+kQ/2hf2imC6TTt8MpfqvxJuw==","signatures":[{"sig":"MEUCIDoLPXPBQZBZT6r3I1KdOZKwmOnGMHwv5Q5QomGz22QIAiEAw7x1rGqAM+dYEmIVwLzfrlxL0c/3TgzEkCPeG8GwTHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51528},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"8e657664482098bf07ba7fbe49c9c77166bcccec","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.8e65766.0_1699945790630_0.5011536136830992","host":"s3://npm-registry-packages"}},"1.0.1-canary.3.100bbae.0":{"name":"tonic-minijs","version":"1.0.1-canary.3.100bbae.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.3.100bbae.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"15493062462fc6f63384905291c6c05e29dff5f9","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.3.100bbae.0.tgz","fileCount":4,"integrity":"sha512-U0pFyEUfrZ0eHW2j4402fRrEveX/BH+5NvfnUCkT24BDn4F8bh2rM+ra0E6Ysd8P1Svp8GQClNKKZ87+pXOzig==","signatures":[{"sig":"MEQCIH/D/iqLNXylKA0vePLTyuOvGGmTo/Ex8JfGMWm+UU6aAiBuCsAPrDvVUgYjz65B5cilFTk67S4f0FpWKEa5lQNm5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53820},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"100bbaed13ac52a61f8a65322993e4add392edc9","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.3.100bbae.0_1699947382401_0.4689510872966489","host":"s3://npm-registry-packages"}},"1.0.1-canary.3.7ed1cb7.0":{"name":"tonic-minijs","version":"1.0.1-canary.3.7ed1cb7.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.3.7ed1cb7.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"9e18b6ecf0c92107a0977af678195500c301570b","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.3.7ed1cb7.0.tgz","fileCount":4,"integrity":"sha512-8JzKu5rl0ljlZODl/B9mQ1FIEQDgG2tTYuvgnclt/4IG5dQz/StDgP292g43aap25DjF2i+WV13ANYPBlTry/g==","signatures":[{"sig":"MEQCIBwHYIPcZgyc5dwB7ikBHHS9EJug3LOCi8/kFxDBU7P3AiAVdQMUbjMz8wdsEfhk8Spqr7JePtRKm3v+aRx/lktJLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53820},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"7ed1cb7e1e53a79319a578c15925003d2be2f48e","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.3.7ed1cb7.0_1699947509659_0.7360839133591364","host":"s3://npm-registry-packages"}},"1.0.1-canary.7c9553e.0":{"name":"tonic-minijs","version":"1.0.1-canary.7c9553e.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.7c9553e.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"7fa96b5aa700e9e128492ebb02ded940e27af9e6","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.7c9553e.0.tgz","fileCount":4,"integrity":"sha512-S3CegKnD3hxbQnRjwcMBgIOJGrz+cMZxTs4Aorc2nSLPPttQroqIM2vzCMslYzL3iFdQV8WwMc/f+Y/iTf6/Zg==","signatures":[{"sig":"MEYCIQCWB76dCk7uMK4Xoqjh7KMYfAf7HPdNOxkudootzbA7TwIhAOi2BFT59aPxQIEaE4saHCNstew+GW6GYjFDJnrLMiw1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53818},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"7c9553eb7600888ff5bdeb690fc64f6e46271dbe","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.7c9553e.0_1699947581865_0.7864516856301447","host":"s3://npm-registry-packages"}},"1.0.1-canary.4.e1daec9.0":{"name":"tonic-minijs","version":"1.0.1-canary.4.e1daec9.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.4.e1daec9.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"a9e7024b95d74eafc8a1c236b7e917c6c025908c","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.4.e1daec9.0.tgz","fileCount":4,"integrity":"sha512-Zl+wjHWnqjI5iqpA6GzfjgeD4NBzIUig0pQIwfagCjVcTWLyaTCEJQNzAkWyA845Yz/2KIC/84bnOeoO/z6zCw==","signatures":[{"sig":"MEUCIHQl1tdNoXvpIMgmO9fqQC3xDZvTogGjCX00dv0piVWjAiEA1glEV3k/i+Hai+eDfbXCSlL6xe5dgeUm6//FKcD5FYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53820},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"e1daec94295c15947ab8e2193e878e40c4e8e270","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.4.e1daec9.0_1699947628105_0.7127653808034946","host":"s3://npm-registry-packages"}},"1.0.1-canary.6f037a8.0":{"name":"tonic-minijs","version":"1.0.1-canary.6f037a8.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.6f037a8.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"9f3641103133a2bdbc1f21a0ef3882da7d9fde95","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.6f037a8.0.tgz","fileCount":4,"integrity":"sha512-25fD2YobPVceAhs47ns3wgLUrQToHfIZoLnvIR4+D2dgTXn+/nP6UzciPGX8xbKO4jNxAkw/jqcklRJGAfGeUg==","signatures":[{"sig":"MEUCIElWfOSPENr95GbCL7KpgirnY2WbRD9D4Am9oRX4gNtEAiEAgVueKeviEr+eni3wEO7TgB9JCxLLCFq+mkrJX/YZZ90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53818},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"6f037a8e796ca850629729dc3cb079877289b31f","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.6f037a8.0_1699956365438_0.7871247358670317","host":"s3://npm-registry-packages"}},"1.0.1-canary.b3d7298.0":{"name":"tonic-minijs","version":"1.0.1-canary.b3d7298.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.b3d7298.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"80ab59f5ec4c7064b44aaeb802f89ad6010111ee","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.b3d7298.0.tgz","fileCount":4,"integrity":"sha512-NdHJUJNomsYUeMoVRiPlsjLjLUkU7K3sT1DKsrceFJpE5o4Ezht1XQ6uaRrJuhL/Ia8Lngt/x1Cw7AEVOAx39Q==","signatures":[{"sig":"MEUCICOoIE0cvOGIFFFq4benjbhBVOJ/FpUdQonVKQKOtwePAiEA3D3Bgk+gRVBmMwCUJNfrd97hiEwcL0s5qn8LXpPGU6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53816},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"b3d7298f82bc32a90bcf0604c612a83fe73f6602","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.b3d7298.0_1700055550922_0.5867979730594401","host":"s3://npm-registry-packages"}},"1.0.1-canary.872a949.0":{"name":"tonic-minijs","version":"1.0.1-canary.872a949.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.872a949.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"1467976df2e0c82c399f2fa85fbc15d16480131c","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.872a949.0.tgz","fileCount":4,"integrity":"sha512-dDCB7mbqVGGex9sj6ocpR1gqo0HCFq9MR5AH9OolWWfvmCqBDPU0VCZ0/rT5gCRm5JfktBlXZTxaBQ+W9fBygw==","signatures":[{"sig":"MEQCIDKdsfZe1+UPdb3Ia3EmmNrVOw867lgc1Uibmq9wwnVMAiB3FEaqABOC61EiTYNrQrISGmslotoDetx2v9NQDnoAsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57628},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- HTML Plus lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"872a9494d2e5cda8cfa7848b5ef26cc041704275","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.872a949.0_1700117285748_0.4217748847753391","host":"s3://npm-registry-packages"}},"1.0.1-canary.2c4b1a3.0":{"name":"tonic-minijs","version":"1.0.1-canary.2c4b1a3.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.2c4b1a3.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"17a0f895502d0852b575c63da60cc81ee1f79312","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.2c4b1a3.0.tgz","fileCount":4,"integrity":"sha512-2jC0AtJqowIoXx6SW9x/QvW1mrPh4f3FLS2Epl4EJeQsH+jREoA//fqfOOaByx6E0QoO6Kos7TgoXhgoHab9qg==","signatures":[{"sig":"MEQCIBFA5xaCWowoirmTD7GSjoPWMaBnVm+J3NQ5ooxsKQtTAiBC8Oodv8wGI19BefJL0JJgSl3buFOG2x85ILtMdsjqpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54740},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"2c4b1a3fb98900f309a728b49847217c011aab71","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.2c4b1a3.0_1700124849427_0.17780778935564556","host":"s3://npm-registry-packages"}},"1.0.1-canary.17f337e.0":{"name":"tonic-minijs","version":"1.0.1-canary.17f337e.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.17f337e.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"8ad79b0dfca4b25fe13d73745fa286eddae66646","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.17f337e.0.tgz","fileCount":4,"integrity":"sha512-quv2bZxAuvuQon3JSKYNJ/lqcv4XeNH/EszW8x03ccFC4BM6lk842QMT9ZbClRBoi2dJE0t/PhEUbiRqpvp7lg==","signatures":[{"sig":"MEQCIHMH6IJ2K2hr7SrZXXzXpMulbe3qvsni8UpQbC+OB/BqAiAZdeIgNnBdOf2VA7Uiy/Ds2q3JYvlHlnduqz3sUe7CSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54804},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"17f337e21351a8370889258dc4b4af554e98bbda","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.17f337e.0_1700128052242_0.3024032081315826","host":"s3://npm-registry-packages"}},"1.0.1-canary.99efeae.0":{"name":"tonic-minijs","version":"1.0.1-canary.99efeae.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.99efeae.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"506adc5b697fb019b02ec260f7cbc149a449fca1","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.99efeae.0.tgz","fileCount":4,"integrity":"sha512-e2qWID3HxGCTJPQZGDKWP4752yuzFRQaSvBTrzQDBlsmUfwRSedAAIRuJOwdLiwQFiuddK8lPXAICcsL/B6M4w==","signatures":[{"sig":"MEUCIQCgk4u6uzyxTJFWZKoGVZYxWjSGailjNefny8N6Wp0cjwIgIdHqARkXv6kSxtO7dKIJAPN+ehIGwayGjL3sMaM5zn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":56444},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"99efeae8ebf56b6a2e2f758e982fefce8bfeee0c","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.99efeae.0_1700130533814_0.1224162971044287","host":"s3://npm-registry-packages"}},"1.0.1-canary.46ebf41.0":{"name":"tonic-minijs","version":"1.0.1-canary.46ebf41.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.46ebf41.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"c22424cf824f7935164037e865751b0143aceda2","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.46ebf41.0.tgz","fileCount":4,"integrity":"sha512-ZeHBXapb0Lz/7r1t+LdgI+T4luVfUL+6E7FhXnpu04Xm/8nlK21uV9OVq2jGaZPi1rDDBziFPInGtwTk5vHJ5g==","signatures":[{"sig":"MEUCIQC55cwtPtFYwslIDuyO342QTp0xSZPCBvSe6rh3q4eGIAIgMjvcGk2aXs3sGMKBSHlT6Vp/Jm5xr8XmwOu/qJAPgTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":56444},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"46ebf41a1fd4e8730d4524e02e8698d8aa353985","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.46ebf41.0_1700135444956_0.353473613472425","host":"s3://npm-registry-packages"}},"1.0.1-canary.46ebf41.1":{"name":"tonic-minijs","version":"1.0.1-canary.46ebf41.1","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.46ebf41.1","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"899400463c2d3a805bb094244a7162489fef59e6","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.46ebf41.1.tgz","fileCount":4,"integrity":"sha512-y75oKKVwPqE/jSBir5/F0kQcyT2DoJJxgpUiMChj/c1Re94QCPXH+YylIfupxbRQjJ/gwq1+7mIqMolZ7Uy3cg==","signatures":[{"sig":"MEUCIQDUr/Qjm+uTdw5wV6iLQcXn4B7c8+P5jBUPyFg5RUPpvQIgcjP7DEUtaQ47k7WSxwRZIHUMzoXAkoY0u7KPG2CDn5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":56444},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"46ebf41a1fd4e8730d4524e02e8698d8aa353985","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.46ebf41.1_1700135473003_0.6726118895817159","host":"s3://npm-registry-packages"}},"1.0.1-canary.c0ee54c.0":{"name":"tonic-minijs","version":"1.0.1-canary.c0ee54c.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.c0ee54c.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"609fd86abf37b371d6d7630fdf089f8a7904a603","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.c0ee54c.0.tgz","fileCount":4,"integrity":"sha512-8SqC1JuV+/If5m8PffrShNmkuO84NwRddsDIvvq4gtCaZ/3nsoOg2rID0hYZWMOuMQPOFTC6wWdY3duaaQxVnw==","signatures":[{"sig":"MEUCIQCk1C4lm1yoW+5taHm02HRyOuxI1vq+Xe7sSOQKk/zjPgIgPAVwUojVx/plMkjQQehb3CAsluWWJ9tCbtiHVtHmkSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":56480},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"c0ee54ca0bea357e214f963bb1f609a46d2f6084","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.c0ee54c.0_1700150202016_0.9423686421808464","host":"s3://npm-registry-packages"}},"1.0.1-canary.4069a3f.0":{"name":"tonic-minijs","version":"1.0.1-canary.4069a3f.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.4069a3f.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"ff737fef6c3963019de3e8733f5d0c960dd8ad95","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.4069a3f.0.tgz","fileCount":4,"integrity":"sha512-mN9KGYV5AywpsVPk89uOehPWOd0aTCDJZGeONiBV9y+dM0EKlWwElFyG8SEb0yHHkgF0JT+vCnBlx4SAjsOsDQ==","signatures":[{"sig":"MEQCIHUjTcMj2fxF0R8pEgpLtE6hlg01MiZihNBhWtsIPqv3AiB1oNiU1H6EYFPVBPXCRct4mfsCHEl8iY0vZY2QpBSEsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":56709},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\nFor class names, you can set the initial state by using the `class` attribute:\n\n```html\n\n
\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element\n- `:change` - This will trigger when the user changes the value of a form input\n- `:enter` - This will trigger when the user presses the enter key\n- `:keyup.up` - This will trigger when the user presses the up arrow key\n- `:keyup.down` - This will trigger when the user presses the down arrow key\n- `:keyup.left` - This will trigger when the user presses the left arrow key\n- `:keyup.right` - This will trigger when the user presses the right arrow key\n\n\n## Statements\n\n- :each - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"4069a3f115a01d1871dec2028347a18a289f16cf","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.4069a3f.0_1700150717281_0.4313492119016604","host":"s3://npm-registry-packages"}},"1.0.1-canary.e9703f8.0":{"name":"tonic-minijs","version":"1.0.1-canary.e9703f8.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.e9703f8.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"f5658ddadb3731bed56cafca74abc570408ba3bc","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.e9703f8.0.tgz","fileCount":4,"integrity":"sha512-rWiij3HqNc3cu1Dz0xXgZzmZVJSdJBeZq8aoO4OCfCI02ZoyJ2Awi5rCwwafeVKNIUn6JO885UICsKMxR/9ibg==","signatures":[{"sig":"MEUCIDHC9DzSCruLdDjUtpDd3j9QqhxcSpTOuNBX+k8kKCiSAiEA0gUztfcanLiFXpwZmnSOO5CEL8mTs9ipBowPXr5nx54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58589},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"e9703f80b6d2cbf46de107e66bb62b189087c346","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.e9703f8.0_1700542957147_0.9626527264215343","host":"s3://npm-registry-packages"}},"1.0.1-canary.8a15a7f.0":{"name":"tonic-minijs","version":"1.0.1-canary.8a15a7f.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.8a15a7f.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"726b497557103b10513bbd87cf289e7d4cfb8f98","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.8a15a7f.0.tgz","fileCount":4,"integrity":"sha512-nCZqdiJ+Vv0PFuD1NfV7EU35flwIJ/CwHgoeO5htrFI926BRNj+ZzndFivlw/6INtOSP7PD/cKb9WBvexqqqrg==","signatures":[{"sig":"MEQCIB7SJAJKuJlNCubDiKelLWcc0pajN9hZbF6xmv91U0ZNAiAamQ2O6y2+Tb5cIEzSRO+s4JFd1xMnr5JRRyqODzwqOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58912},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"8a15a7f76f8a5eaceeee4dae1eab436b6d8b019f","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.8a15a7f.0_1700544635948_0.29677475885406013","host":"s3://npm-registry-packages"}},"1.0.1-canary.d3a7e6b.0":{"name":"tonic-minijs","version":"1.0.1-canary.d3a7e6b.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.d3a7e6b.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"fd07ce274ad512d1e51710a42c1d0aa98596bb17","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.d3a7e6b.0.tgz","fileCount":4,"integrity":"sha512-5gSGLHIZKfZSzkVjCfUEaV1xlORnz3juMGqeger1B+GFz6M9ax1IE4lbtjcergaadnpggFvdVFOnGwLG1ME+7A==","signatures":[{"sig":"MEUCIQCLpAdLnoQ7O9xX96O6s6KofNKZWjscFe2OiquKG6a35QIgR4CO64rULql73fE3rGDloc5+oisbZCG6/DGcN3R3ts4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61668},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"d3a7e6b939162bcb1b518998780621a8479f4afe","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.d3a7e6b.0_1700557656711_0.19086106197215513","host":"s3://npm-registry-packages"}},"1.0.1-canary.4b3045c.0":{"name":"tonic-minijs","version":"1.0.1-canary.4b3045c.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.4b3045c.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"9c21454b8afb5dbb413fb1fbd0890162aae507d9","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.4b3045c.0.tgz","fileCount":4,"integrity":"sha512-ty7SGv8HKHlefl457mj59y/yVcbFmjVG4NbNyAz4MPUIxoUvuFlotWocF/CY6FO3M61BvbHeyDCCRTSdS5s6MQ==","signatures":[{"sig":"MEQCIEyxNq0NJqx8cKCF3FoTkGXBcgqzxl0HgRJItwAThszEAiBBoCZR0XLatgITQnaL+qM34UGFG4iJcgBQedq9Nb6/Jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60657},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"4b3045cc2bc47226ff6ab07765a9ed710b242b45","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.4b3045c.0_1700636968865_0.6823990165227747","host":"s3://npm-registry-packages"}},"1.0.1-canary.879e850.0":{"name":"tonic-minijs","version":"1.0.1-canary.879e850.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.879e850.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"2ce6cf1e33047fdcb974f32430074a4471368b04","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.879e850.0.tgz","fileCount":4,"integrity":"sha512-ET95X4/dvVIS2uP/ssDHeHPRJPBu020sjsUgIY8Ysahiv9uZT2HkAucTahFCfhhwaPxpsZDf2Ydymwe9HR8sjw==","signatures":[{"sig":"MEUCIQCicRVYt7lmltoq3uqoSWF6nvqz7no/WHsCG1coGm71cQIgHv+1LGPTj1ZTSADs7qIo9NFB+RASfjm6DBYg5YIwyTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60804},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"879e850b2a5abe7d4785118a52c578749c752381","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.879e850.0_1700637187723_0.5997071482670839","host":"s3://npm-registry-packages"}},"1.0.1-canary.d916721.0":{"name":"tonic-minijs","version":"1.0.1-canary.d916721.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.d916721.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"e9a012b490cb1279f8e9ecdbd437efa1c8f30e9d","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.d916721.0.tgz","fileCount":4,"integrity":"sha512-kOLZ0UVlj3SfODLEYCTKslzDqNU9x5xZxnie8jAaOsyv7MlFzBF+q+InYuGPHZJLFn5Ar7NEutpBqiim831DmA==","signatures":[{"sig":"MEYCIQCj/t3GzzlBZvdUCJ2l/VsHdiPL+bCN0Tohehv319JAdAIhANce2FdEjNfd5D2YAwPsEGEpbG9Fmfx0WgJIW2h92DjQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60804},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"d9167214e53881c6282b4e825dc7cc603d62a616","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","js-tokens":"^8.0.2","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.d916721.0_1700637588481_0.609142561537785","host":"s3://npm-registry-packages"}},"1.0.1-canary.ef03957.0":{"name":"tonic-minijs","version":"1.0.1-canary.ef03957.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.ef03957.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"3365212887ec1e924bbc5eaf9ac47d69564d8eb2","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.ef03957.0.tgz","fileCount":4,"integrity":"sha512-668cefHXozS2YMGmCFP8YL7e1P+j/aCH/IvH19dOrF5Q4aKBY5gGDuFrNHLwkn63YRF3ZxkuYE+mVCz8GY7pwA==","signatures":[{"sig":"MEUCIGOj2khxI4qex2aD7HCrKfDvJEFuOdfnBJeS/YAb16v0AiEApnYKfWdXBwnJAxo0VIjLrVt1hV7s7VW5mmufGRwiKnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":556276},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"ef039577d54f5509bef97427e1559a3815a444a6","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.ef03957.0_1700675692940_0.8463138274639266","host":"s3://npm-registry-packages"}},"1.0.1-canary.92d5f19.0":{"name":"tonic-minijs","version":"1.0.1-canary.92d5f19.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.92d5f19.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"3f169ef03e0ca22bfd715864acd253f1d36303c9","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.92d5f19.0.tgz","fileCount":4,"integrity":"sha512-lh2rUAImm+Z4H82FshNiSf8RWuR5dgqF8BdM7Q5EwIKewvSgTRfuoLeWbZBkoEG6LAkcc+UeVEEakZ0bCkG7Rw==","signatures":[{"sig":"MEUCIB3fkoBcA7uEeBFZX0FuYjTLpvZLeML+979PemTaoVTvAiEA8VOp1fJgBW+KaF/53yQhfaALPIl8OZU3pWBfKO24u6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558576},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"92d5f19d6e034d8d9bf673aabfa9d4038336b353","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.92d5f19.0_1700721587188_0.1399570698506276","host":"s3://npm-registry-packages"}},"1.0.1-canary.5ab74a7.0":{"name":"tonic-minijs","version":"1.0.1-canary.5ab74a7.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.5ab74a7.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"5c0a0cf4c546e98f1f7def83595350ece00571f7","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.5ab74a7.0.tgz","fileCount":4,"integrity":"sha512-VMwDduK2mzTTHcYe1aQ4JH4K7ua82xoxKON4RCFeMNMhzUHfBN1tLGCIStgDmIY1vty+Kw1IEZ3jRxjM395WZg==","signatures":[{"sig":"MEUCIBS9YkWb+zh9UerTa/PAMD5rVkflXmhoZVeQK4PYXotYAiEApQr6jkWmcYVl/GkJQOfBQQnFwd6Mr4u+Vfj/6ZN7lF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558576},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"5ab74a76ba6ec9ae62043ecde72a5530c0852276","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.5ab74a7.0_1700721601416_0.2364166607695255","host":"s3://npm-registry-packages"}},"1.0.1-canary.52866c5.0":{"name":"tonic-minijs","version":"1.0.1-canary.52866c5.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.52866c5.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"90ba2840b6d9e62c9212d24c95fb5a14bdd2ff73","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.52866c5.0.tgz","fileCount":4,"integrity":"sha512-AwwlIkgseMW2z1Fbe0S12WsnKerzZN/IF5J51P1G8tDkpJQDMn10XH1GQpsTAy9Gtb18igOi+m77XtYC3py+lg==","signatures":[{"sig":"MEQCID1X50yQYgapU9y0TRF7Tf8X1fSMfWqhHC+cCd7aqGKYAiBDo/EszS7eSHaXtux5dp4qPRps9EaVBcHoniILPpyYHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558576},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"52866c5b60676dc336a991f429d0b4eb8463841e","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.52866c5.0_1700722067699_0.9209858319012472","host":"s3://npm-registry-packages"}},"1.0.1-canary.4a8488a.0":{"name":"tonic-minijs","version":"1.0.1-canary.4a8488a.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.4a8488a.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"a00f022cb67932af2369ad3f91d68f1d0b342542","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.4a8488a.0.tgz","fileCount":4,"integrity":"sha512-l/BQBVBWERz9IQWMubo6GNZf1F4/OITDNvyclBaZs6CnopFcbP+eA+nACks5qJkfy2GhaVy4m+pJesuDHhnp3g==","signatures":[{"sig":"MEQCIDUOBYk+L8PR5vQx6CjVSZLr/jIoZyMTu+tgnWjmL6zrAiAqyrkRMOy+kGi3lAf6JzwmWMajoHySQnqeNJXeMeEsmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558576},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"4a8488a60c35660c8db1225c1937acfe3d1a8a8b","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.4a8488a.0_1700729121197_0.48325825562402835","host":"s3://npm-registry-packages"}},"1.0.1-canary.9cd4ecd.0":{"name":"tonic-minijs","version":"1.0.1-canary.9cd4ecd.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.9cd4ecd.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"221ba6934217e5ca7b389e40171cce61a4959705","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.9cd4ecd.0.tgz","fileCount":4,"integrity":"sha512-tS2U3vYASGo/hQZkTYOo7I7C65bP/B6vhG1JFiimUCWimMcvTwiVE86gd1SyxkDx5iyV7yp76JNwwpwap9fIhA==","signatures":[{"sig":"MEQCIEs7TxXSqbS5bRX5hyyaP/O2UsqjRLbSzc5BFjTvv/flAiA4RD9n3/wKOPpjEe0cuIoiE8eB+wk3ukSfoLDlUBxQPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558576},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"9cd4ecd18b18e35c33d4f078f0c67ce07db14af5","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.9cd4ecd.0_1700729259713_0.9876476091602551","host":"s3://npm-registry-packages"}},"1.0.1-canary.0c6ba1d.0":{"name":"tonic-minijs","version":"1.0.1-canary.0c6ba1d.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.0c6ba1d.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"9fa625eb51553fbe38a9638af45bcab363ac0f52","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.0c6ba1d.0.tgz","fileCount":4,"integrity":"sha512-e9ggl8ELt5C/3YVzwoV7u4tnVBvKSxyBvQV7v3GKv3SJRtXI6B7aroZkEoUPbEgDk8tOUl/+NN5DKtUMuUMxQQ==","signatures":[{"sig":"MEQCIEkO0I8doWyavA6xs5ivwFdnFGAnXgGRXxfI80/mrE6gAiACzFMEp61IZ9ykMb9MGE3KNllvxxElmfcamPJKMRJarA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562030},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"0c6ba1dfaa78210a68a52f35f137d464548e3ad8","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.0c6ba1d.0_1702789390410_0.297047732988754","host":"s3://npm-registry-packages"}},"1.0.1-canary.7.3125182.0":{"name":"tonic-minijs","version":"1.0.1-canary.7.3125182.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.7.3125182.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"eb64625259b7a039b94931eee3451a702064fcb7","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.7.3125182.0.tgz","fileCount":4,"integrity":"sha512-w/bomzXq6MLBx4cGIWYz921uqtOhky4TRpj1mibpK9SEtkqQjfbmyCjjK8q5R0/Ayt8nVd6dN1ag2LToTMQsug==","signatures":[{"sig":"MEUCIHhgxLcOlF8jmqILc8PHvrxPrFyXdftJUdMXTsieEfr8AiEA5rSBOv9NAVKVUGpTLKVNTjL7jnhQr3y0pfC6UYF+Pmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562448},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"3125182cd39d5b50bf32223793b844200ce8b838","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.7.3125182.0_1702791493746_0.7429843985734723","host":"s3://npm-registry-packages"}},"1.0.1-canary.5.ab7dcf5.0":{"name":"tonic-minijs","version":"1.0.1-canary.5.ab7dcf5.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.5.ab7dcf5.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"6a277cf85608efb40cd24a4969b17ec4e305a22c","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.5.ab7dcf5.0.tgz","fileCount":4,"integrity":"sha512-R1mOmIFOR2A/8NZtEI73z9sQ6Vwlo8odU1aJRgdPJaD+5VYepqPlUdk1vaOGUt9kjN8CP2WdieGykAMl63+niQ==","signatures":[{"sig":"MEYCIQDMAMEPH+BaBzAo1hZRl/VFHbqh2ta7gyM8y2MhL9774AIhAOF+hU63rPdoLjfPL/WD1BmvJwCdFQyKY+aYR0iBTXOk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558573},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"ab7dcf5496636af25998f6a48ab2cab06354501b","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.5.ab7dcf5.0_1702986263576_0.8021766006965783","host":"s3://npm-registry-packages"}},"1.0.1-canary.6.6917443.0":{"name":"tonic-minijs","version":"1.0.1-canary.6.6917443.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.6.6917443.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"2e37101fb6dccde6efe6dda8822942a99179a8ae","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.6.6917443.0.tgz","fileCount":4,"integrity":"sha512-lDXwGht5rXErtsT+/QWw1MJUUV4+lYakN4kY06zqlT2/v6fq5JOJNrEQbh0fVTnXOdyIPuaV6SoHErO4kVKbbA==","signatures":[{"sig":"MEUCIQCWPDD0hjcHrHEmLF6l2qLcMBEuTtD83hDwK7zhIPfkTwIgFgru9KPsKt6RDmTa+ObIanTdtlP8NyEcbaxEgS10ib0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558573},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"6917443ea6a8354299f2538c73590b825bf6b019","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.6.6917443.0_1702986275993_0.10356177484991069","host":"s3://npm-registry-packages"}},"1.0.1-canary.7.0ded757.0":{"name":"tonic-minijs","version":"1.0.1-canary.7.0ded757.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.7.0ded757.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"bf81c6b70604a02d642a78bb3bd249b3af3799d0","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.7.0ded757.0.tgz","fileCount":4,"integrity":"sha512-hIrpiX3qO68nNRRtYqnZB5zBOieZFmTOS6+rvFchiP91KRbqFs947gSxZ9qIIouizUa+mlqv5z5DNdY3f7U1sg==","signatures":[{"sig":"MEYCIQC2jDQVl/NYfA6vPiGEgBjYXPnCtxnmvkUmq0kgJGI7dgIhAKfChE/M4zlfB7Wg/RNxxr8jUwsJ0zLGSOjXZ9bDCKDF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562448},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"0ded757d9fefbb2d07069e0c20b66b948c93c78d","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.7.0ded757.0_1702986293402_0.3106708459123766","host":"s3://npm-registry-packages"}},"1.0.1-canary.33d5ee3.0":{"name":"tonic-minijs","version":"1.0.1-canary.33d5ee3.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.33d5ee3.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"8d7a41b9e8c398d56eea06725436781e93dbbee8","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.33d5ee3.0.tgz","fileCount":4,"integrity":"sha512-1g14CTuNF276jap/Z4iT8j8WW9ewm/nlESFIgvDeCBAZ1rxYXuuJ6dFLwI3R3yD/aM/vJ73S15YgFPIJaiwqqA==","signatures":[{"sig":"MEYCIQDN8a1h8q0+n16r/2pV9E7pvEj0BtTz2YaJU84W0esSgAIhAPz6rSsqSykd44v2UrFw8sZJbFMN28IJnF4GXpklLXr9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562446},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"33d5ee3265b5face52f7e8bf1bf588d0e5682160","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. - Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are g","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.33d5ee3.0_1702986509763_0.8181765186047087","host":"s3://npm-registry-packages"}},"1.0.1-canary.5045613.0":{"name":"tonic-minijs","version":"1.0.1-canary.5045613.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.5045613.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"3d0809c90fd3edf9c15ccd40f307a0768db3e257","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.5045613.0.tgz","fileCount":4,"integrity":"sha512-sGURMF0WjcEpMyBSFXYoEkis8dvRz7jFCgeEDrd23kPPtIgef+rldin8F30USZtFxQzB8znw0ZLljJF4vwnEhw==","signatures":[{"sig":"MEUCIDYeGMjNMXko+NHVuLHWpHAsuyQBxbFykj8K2M+mPkw3AiEAlFJmZVmT0RC1MvCk1HiS4KQn1u6efciGLqKgQKFYVAs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563036},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"50456131675308781a08bb398c8c7a803452a222","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.5045613.0_1707021642636_0.2147086239302416","host":"s3://npm-registry-packages"}},"1.0.1-canary.1e28172.0":{"name":"tonic-minijs","version":"1.0.1-canary.1e28172.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.1e28172.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"248a4035bc3e8f0dfc954d4ec85ea8ec17d227e4","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.1e28172.0.tgz","fileCount":4,"integrity":"sha512-r5oGDNyn6YxtrGytlgu5nkRs7vtLwPMFGr+iVTbN1ntdKa1y1NRs1bk2ShrWPhvPCArRmuCHLMZnwVVxus/gxA==","signatures":[{"sig":"MEQCIFHH17q+xmybw9DrfY0l/zcGCORG7uICjO5sxGeBT876AiBffwnrvxFhYl1EwLMsoGNX2+7sezYR99E/dPRInkgzPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563040},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"1e281721d3461e196abb5488100f93f1965d4b67","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.1e28172.0_1707021711155_0.21875560600981614","host":"s3://npm-registry-packages"}},"1.0.1-canary.de63c6c.0":{"name":"tonic-minijs","version":"1.0.1-canary.de63c6c.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.de63c6c.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"ea80c68acea13293e9562f0a86816e2c23d40010","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.de63c6c.0.tgz","fileCount":4,"integrity":"sha512-uLVSkri94Lfr/CN+QQ7UY1vj5e6ilPOQ5a3rXmLilqve8RYJaKS87CQ5dmzztjpX8BxshKOsZVzH6p4yfNo1Kg==","signatures":[{"sig":"MEUCIQCXnpXKCFF3x7itu9WxsrpQcpI6Bapvhdwm/uxYP/rDzgIgamgDzHra9HCBRW98aUyUeGBxEj0J0zXeIbFb0/XltN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563299},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"de63c6cc1343b34a46bbe63e2e0bfc2b79887f2a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.de63c6c.0_1707059435287_0.07313310760368319","host":"s3://npm-registry-packages"}},"1.0.1-canary.417afa7.0":{"name":"tonic-minijs","version":"1.0.1-canary.417afa7.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.417afa7.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"00405ae232ab8867c8d0821975b62ae6b5607bcc","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.417afa7.0.tgz","fileCount":4,"integrity":"sha512-7pm8msTofuzRTebxOjNRXXe1kVv1Kkm8UJDkEVLg8TlSQCoRVQONnwI6olvWCLkAG+y1IHT60nbgKh6dwA9aag==","signatures":[{"sig":"MEUCIQC1xUSUfxEp4lMKwtM+JIQGNPEAPwaB12j2IKEdh2pOQQIgYVxVYmJTl+OI966cLelBCd0YxCQmHFNcDLL59bUrBAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":563321},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"417afa77d2428018484e449602584da4f04894b2","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.417afa7.0_1707103392035_0.32077408608249214","host":"s3://npm-registry-packages"}},"1.0.1-canary.d5a8da4.0":{"name":"tonic-minijs","version":"1.0.1-canary.d5a8da4.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.d5a8da4.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"f185c15f56d60057ef0a34bec32778f7ebabc079","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.d5a8da4.0.tgz","fileCount":4,"integrity":"sha512-51IFlGkCOmQuY0kPEb/L/bSGzT+DQAzjOq0b2C/kZGnMaLJSyFyhaqQGVaT3k5bo3DxWtwKBAxcbGmEM/CRWVQ==","signatures":[{"sig":"MEUCIQD2mrnz5yNgfzfdk7FLNQyhXBByGcOJ7uOztoeChn3K7QIgReXKI/mO+yvGE5WDSli0w/IPxRLFP6xMtgjr4NgDkfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541627},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"d5a8da4ad396bca69383420e8dd8a335523a331a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.d5a8da4.0_1707117846812_0.2602209497698169","host":"s3://npm-registry-packages"}},"1.0.1-canary.c97d304.0":{"name":"tonic-minijs","version":"1.0.1-canary.c97d304.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.c97d304.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"3f856b371407b3b9d386c056a1d03d26e06a68b5","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.c97d304.0.tgz","fileCount":4,"integrity":"sha512-JXhV7gVs+NPY1d+o/JmWauiUs3uy3/ZzMG6nIrAy5SGP7JIhY3gqnQjDsbHlR+BvfGAZOhN0JpsCor7Zxu5wQA==","signatures":[{"sig":"MEQCIF9JXGhpDbFGfH0wAF/gAWvR6vTCDh+ciBMBAxbH8hvlAiBPrqFu9pHLi+9ujyrIIaPRjgfa/iqA300SvZX60Ajwew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541502},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"c97d30408ab128a0ae17f9d2d49b737318c2c55a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.c97d304.0_1707122078317_0.7691574852768073","host":"s3://npm-registry-packages"}},"1.0.1-canary.11e8f2b.0":{"name":"tonic-minijs","version":"1.0.1-canary.11e8f2b.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.11e8f2b.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"ea1a8d2d0da3fb5c327e1cbbe8bcf893e93a23dc","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.11e8f2b.0.tgz","fileCount":4,"integrity":"sha512-/A5P+Z7E8YtdGCe482wMPpJwtBU3dKuzjtGbj3pi1nHZf+Yyiy5jsEu/ffV013QysX6oRI/R4axemOHRMLc8hg==","signatures":[{"sig":"MEQCIFPPSBvtl+4casT3DJtpw/raVT2KFolQYwszSlG22CBAAiBLZsyxZ9H7RX0nsz4Q5M+9B5fUAZh7omv8VecOofl5DQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541851},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"11e8f2be7de622bfd403fbc6d671c0f86b686258","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.11e8f2b.0_1707123086197_0.3656293765811738","host":"s3://npm-registry-packages"}},"1.0.1-canary.c6339b2.0":{"name":"tonic-minijs","version":"1.0.1-canary.c6339b2.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.c6339b2.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"946e7c58ba99e7a9b2db50ec40f1f5a4b88bd23c","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.c6339b2.0.tgz","fileCount":4,"integrity":"sha512-DrmhfbybsGhbIt1LASZ+W6jlyaqxtVe6OtF3SnP+ujUdCSS//1QV0Q68XJmyy9A8gDmUcIPwVDE+I1Wg5XhVgw==","signatures":[{"sig":"MEUCICmRDst1um7VrijdRI/ZivcUcMS5WrRPstWvZ1K/zvnhAiEA5bUSvyB198hC5HVssw0VssGmvdL7wLikYKrlB/+EE/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"c6339b2e153ac223d556f0d11eed43344dc5d04f","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.c6339b2.0_1707124130172_0.18452659067470645","host":"s3://npm-registry-packages"}},"1.0.1-canary.c3e7b14.0":{"name":"tonic-minijs","version":"1.0.1-canary.c3e7b14.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.c3e7b14.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"b35c9a8c65017587fcd8ea47b89514e75b943af1","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.c3e7b14.0.tgz","fileCount":4,"integrity":"sha512-thX4QXUbeKZee+7JZkoNuoKe/DHJmPX320Mc8BP0Qf84RBfocYU37w0Y/HLyyFHOLkxMlm1+R4ju3M3T6696jw==","signatures":[{"sig":"MEYCIQCBzkVrXg2NaWDtSpQSmNbCXP9GIRGAdLmk5k1/RnRd0AIhAN42bA3iFUagsFRMA/MdaKeHrGT/ZPsLexX1WUhZXM4H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":541827},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"c3e7b14ac7b77fdecbef212e109c2be1543e380d","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.c3e7b14.0_1707124303413_0.9138438463563201","host":"s3://npm-registry-packages"}},"1.0.1-canary.742f058.0":{"name":"tonic-minijs","version":"1.0.1-canary.742f058.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.742f058.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"90648a18729c256ce932f896be8738932adf6c0b","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.742f058.0.tgz","fileCount":4,"integrity":"sha512-MqRUnxpr7JILFPeSnAG2AZEktnT+Vtt76aJFZwlhMnQ8LkqYdXauL4gw3O7G3WfTDpzt0iyMZXPZ6c04UJK7+g==","signatures":[{"sig":"MEUCIGiJVHvh5mfpjAdSkX9kpZtqUuKEK3Mfa02oyylnNrtaAiEAmh4xsAljCnLLOTqt5DGFoW6NmLlVwK6QQTq5x1LeM0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544308},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"742f0585c6e9619c5d1ed9e76622ced56cc8e9de","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.742f058.0_1707192132407_0.20841291559850483","host":"s3://npm-registry-packages"}},"1.0.1-canary.33aed90.0":{"name":"tonic-minijs","version":"1.0.1-canary.33aed90.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.33aed90.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"3048de7e137a6d836032cb93989d1bd2c7d63762","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.33aed90.0.tgz","fileCount":4,"integrity":"sha512-hZGGSkBF64qSoQZSxTHGhl+26uZcshWt40fn8Vh4BHacRM0kiugZo/BsmcW6zduf6rIkQi0EpXdxvo6PRf5YAw==","signatures":[{"sig":"MEUCIApBztW5jg4Z/wNCyU2BZL+Zcr0xsLdVSzRtl8Em9+rwAiEAwfY3eSp95jaFiB7OATwjwnskdHHXcaLFSzhb9VJOJ58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542363},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"33aed90792ca6c160c42b1ae5bcd7b237ad72643","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.33aed90.0_1707192161507_0.3520053077615697","host":"s3://npm-registry-packages"}},"1.0.1-canary.247318d.0":{"name":"tonic-minijs","version":"1.0.1-canary.247318d.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.247318d.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"7c82afce31c72306b523a312643487a525bce8a5","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.247318d.0.tgz","fileCount":4,"integrity":"sha512-CgcCvi9i8HI0Oybtn3VwAzv3mCTcFiTIVA0tJTSFsW08IGdWoxgpYK6HaCUykAQScRY6qtJPcf2pkSceAtTapQ==","signatures":[{"sig":"MEUCIQCPk+NAcL9XbZFzbaREIY/O0gNANE6IKRsHaZ3az8G6fQIgKBBolRs2hAfrPdhegL0BlH4Je7Dyzc8f+PdeyW10ED4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544487},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"247318dbf2dbc774f798f7efe0678ed1e419b6d5","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.247318d.0_1707194611444_0.1518888635890958","host":"s3://npm-registry-packages"}},"1.0.1-canary.c3cac78.0":{"name":"tonic-minijs","version":"1.0.1-canary.c3cac78.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.c3cac78.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"c41584004f2f438b1e1f8085c66c2f2ed07f15cf","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.c3cac78.0.tgz","fileCount":4,"integrity":"sha512-rOvVzMk0ne5KsKMNMdp94vR76GeYc7tQ0xgMidVklIKR5/ZTbd+n+OfHRO5i2sbQTNiAajWAwISpC19VLSG6Mg==","signatures":[{"sig":"MEUCIHdw9vp0Xy3WIVo5O/eAw68z6AhyHIInhZkARSAKCPBhAiEA7R6Qp9IW6/qug1uBWg4PQoH+kDJnFMXDpYQVWbUrpC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544487},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"c3cac788cd982b8fd40fbd87fce63031e3cb8c4a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.c3cac78.0_1707194644270_0.3310113887453612","host":"s3://npm-registry-packages"}},"1.0.1-canary.c5816c7.0":{"name":"tonic-minijs","version":"1.0.1-canary.c5816c7.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.c5816c7.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"e1299314899fc3067c1e4666433609b3630833c6","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.c5816c7.0.tgz","fileCount":4,"integrity":"sha512-olde1PsR94ySSZkUKGQJnJCGewODAkx0hSle4n6ChuYPu8LnIPP5rP2YSaYS5PbGT3m9PYn+VAVWlx+C7OZIbg==","signatures":[{"sig":"MEUCIQCfzsxi49B2JL9L2VoAiSsFvu+3zwazfqn+mC53eeXgcwIgTaNoYk3jnIaop+LmuSwAJHbaBhY2pe+CmSEqAX9ZTw8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544771},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"c5816c7e2187b61bc2993c05f319a521866c8431","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.c5816c7.0_1707195150310_0.6775364326646942","host":"s3://npm-registry-packages"}},"1.0.1-canary.8.eb1631a.0":{"name":"tonic-minijs","version":"1.0.1-canary.8.eb1631a.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.8.eb1631a.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"dbbacd5d3aa6828b544ec84c640cf4ce1898ae40","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.8.eb1631a.0.tgz","fileCount":4,"integrity":"sha512-Vie6j/Czs8NHBs+gKQKnS94BZAGB4VFDGLW5msE5Mzv6Q2+qsIrUTAEev01kVlVFBL7XAanJZcVFxKEWw5yQkQ==","signatures":[{"sig":"MEQCICTR44KA8C9WDmtoo0eFApx3SdXSH39LN8m1w31whDrwAiBnjj2x/aT/Ea2m8px7pB8BacslR+ugwrBGZj5Cesq93w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544786},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"eb1631a2f22d059a3a6839f33ad8cd5d831725d5","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.8.eb1631a.0_1707200483583_0.337056892425424","host":"s3://npm-registry-packages"}},"1.0.1-canary.8.fee22b1.0":{"name":"tonic-minijs","version":"1.0.1-canary.8.fee22b1.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.8.fee22b1.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"cc98e99879ba7a7a442ab4835e20ab3221adaa85","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.8.fee22b1.0.tgz","fileCount":4,"integrity":"sha512-CqFhllRrv8xYYxiXzzpuunMVFmP2Ihkye3wxAGtqP7PlpLTclmehoahW6IKCJ8YBAF1OFUyheJkL2Ob14RzntA==","signatures":[{"sig":"MEUCIAfd8MOIKng42iARWUvvFzds3D3AF2mlG3dcqSeBfti2AiEA9rck5X0bB7oiwaCW+eZCvrABUR1qXWwpOLqZxuvTU88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544769},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"fee22b13412dfbf0f567dcd374f89b68bb1db39a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.8.fee22b1.0_1707203793167_0.45236478673290903","host":"s3://npm-registry-packages"}},"1.0.1-canary.8.1c425c0.0":{"name":"tonic-minijs","version":"1.0.1-canary.8.1c425c0.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.8.1c425c0.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"073a614d90fba0279e961f5209b8733449031292","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.8.1c425c0.0.tgz","fileCount":4,"integrity":"sha512-5iq+XfgGt0QTksKeh+zqv+gNSSaT7BVKu6rAJw2wHqAOr5+2o268YnoO7skhML+VmzwLzmjU4b2LMOlZVeweTw==","signatures":[{"sig":"MEUCIQDJzGTib5zoKUBIsHtL+hajkgSdVcdLrPVsY0DdktX1VgIgLTY/RCMJT8LAj598iF2xkAxUUaRWpMehSC/Ks0QqAhU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":544769},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"1c425c0a39cd08e65d2d3a8ad8a2cef6d78a5ddc","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.8.1c425c0.0_1707204433882_0.5810355419598023","host":"s3://npm-registry-packages"}},"1.0.1-canary.8.6d910a9.0":{"name":"tonic-minijs","version":"1.0.1-canary.8.6d910a9.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.8.6d910a9.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"8426ec0d2fa44a5611d272e607b6a8b52876cb31","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.8.6d910a9.0.tgz","fileCount":4,"integrity":"sha512-lpLY/uVIESCwe1KmzvA2SFbBPhmxqZX2geRuCt3IlAvqYRgVVMqqkjPKyjj99o21xw9vrZGWuYArbODzwdAx3A==","signatures":[{"sig":"MEUCIQDspAvfLTZ+SmggFwQd7qAvEq6gIKWlX3el0fRPU46GegIgZ0NJawvdOFIi9ps4P4xATRhqAZQFjYN+r8S1sSVwKGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545384},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"6d910a9b5b8c9143abbc9c1075d1d76e2cd5ea1c","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.8.6d910a9.0_1707449801017_0.48670697837226196","host":"s3://npm-registry-packages"}},"1.0.1-canary.8.5bc7ddb.0":{"name":"tonic-minijs","version":"1.0.1-canary.8.5bc7ddb.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.8.5bc7ddb.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"a13fa10a781ca7d3b464bce6d3d6b951c769ed38","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.8.5bc7ddb.0.tgz","fileCount":4,"integrity":"sha512-lrrsqgTD7xscOYBxQyqnBbUwlAErq/DKa4aB+sW5qT14BOj0ML1g2yKWw96ijHx+BWP1w6s/0kCDA/+WZgTgxQ==","signatures":[{"sig":"MEMCIHn4ktZPRyO/aRZjkLJ3FmCvDRjHKPgi87dS3SSHvyIMAh8EJ2Wmi1dtHyPl8S2YUxnxyg4rovbOnYTkmS6m+3HC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545384},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity. \n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with *lots* of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2). \n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated. \n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes. \n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n \n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n \n```html\n\n\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"5bc7ddb01d9d6e48337d4d1fa2c184a8ce9e7594","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.8.5bc7ddb.0_1707449878137_0.7086501568133003","host":"s3://npm-registry-packages"}},"1.0.1-canary.9e9cd86.0":{"name":"tonic-minijs","version":"1.0.1-canary.9e9cd86.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.9e9cd86.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"847563f11b91b45c9e29875a88b1592af07a1f20","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.9e9cd86.0.tgz","fileCount":4,"integrity":"sha512-BSJx+nUCLwvW5enLnczjN4DnTQfNYUAwNXuqfDyE6FUNZtWFJngr3+SGdPdmP+W7vXJzlbTVXz2CcSWXrExDOg==","signatures":[{"sig":"MEUCIQD0e4RJFvesSm95GrSa95AZJgrZcIlJyw+GDr6JtD0WrAIgSvyPJDEpGZk9euYrtZR0ixYXWkvbKArt8j0hkc3nkFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":545371},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"9e9cd86da2a43af55158fd9fb0a289bfdfa8c258","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.9e9cd86.0_1707450078114_0.31619060171628166","host":"s3://npm-registry-packages"}},"1.0.1-canary.8.ad24fea.0":{"name":"tonic-minijs","version":"1.0.1-canary.8.ad24fea.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.8.ad24fea.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"4d039d2ac4737413fe0bfd1da8ea05226da250b8","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.8.ad24fea.0.tgz","fileCount":4,"integrity":"sha512-IVK3WKHTcVygYxxeKVOShalfVfioKk2zKRpdpeqLiw8BDoeZQ8DZXMENyzXPQ7qUhKO956qbPrBS/80UvU5wHw==","signatures":[{"sig":"MEUCIA38kpc3r4a+hqXtk3afleT7f7Wp7OdBDCFHMWcjFzxIAiEA42sWlHLAixRFer5KUbAOij9r5y5MNVEiDHsuUvd1+NQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546790},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"ad24fea2d0f01e5b406424294482a580cb193611","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.8.ad24fea.0_1707452429991_0.3486710674846727","host":"s3://npm-registry-packages"}},"1.0.1-canary.e8943dc.0":{"name":"tonic-minijs","version":"1.0.1-canary.e8943dc.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.e8943dc.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"cd955d8aadf6a03772fce6e49bdf3ba852136915","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.e8943dc.0.tgz","fileCount":4,"integrity":"sha512-a7GNPh3Y+ig87vvscs76473R8YlCRnttbq/BbXVJ52ZEpdJYYPcNTq5LywAnvf8Vpr/oaSAsylYGV3R/olc6zQ==","signatures":[{"sig":"MEYCIQCk4rR7N+9moveiHWCfRePcFdbdsntsSZDiQewPWToZSgIhAIaNby9SBG3DP9fj5kafzIQ4AHZ9x6B+SNjmqMu4bvIW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547002},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"e8943dc357a26fdc5b5a413ea22ee2f3c0ea3855","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.e8943dc.0_1707454162737_0.6860263896573022","host":"s3://npm-registry-packages"}},"1.0.1-canary.245332e.0":{"name":"tonic-minijs","version":"1.0.1-canary.245332e.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.245332e.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"e2751d18df7627728aa9deaccb5b89a677badf29","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.245332e.0.tgz","fileCount":4,"integrity":"sha512-wMg595EHgKGZmfDqIAP+I5Lctegnmxx6y6RfVmdWMIamC6rck34aiNFlTsJQLOUhdYAGAnAlMi5p//Sg5wYkhA==","signatures":[{"sig":"MEUCIQC4RNAzMlfv4ugtChf8CEBQLpjm+ha4dvGKzcXtX4aHaAIgS3qLnkf30NDhlwkS6RPuCkccK4Y89F+wDtBwVcRUJf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546720},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"245332ee758b25af6f3116b6ac59db37fa1605e4","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.245332e.0_1707454245965_0.9662090983485192","host":"s3://npm-registry-packages"}},"1.0.1-canary.ba7086e.0":{"name":"tonic-minijs","version":"1.0.1-canary.ba7086e.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.ba7086e.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"01bfcfa1f779b6d012948befee96f96fe125582c","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.ba7086e.0.tgz","fileCount":4,"integrity":"sha512-Hw5Q5jE/PisHwWlFc8Pumg9qbxRNwF1MxGZhgtGKDpvoKw2RnKLN1c+a3aExE+MaaiwWj4hN4KIQD1sJqwHwPA==","signatures":[{"sig":"MEYCIQDsrb7OYto/4bZGbrohkLjPSfvFxzjlyPiABLxCJwuFpwIhAILpAz2FfAZUQPeSWDZtT7jUsNokhz2aYNnoEDmHMlot","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546914},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"ba7086ea602fddc60908e7958187a841e708e55b","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.ba7086e.0_1707455186791_0.131594670835828","host":"s3://npm-registry-packages"}},"1.0.1-canary.fea8996.0":{"name":"tonic-minijs","version":"1.0.1-canary.fea8996.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.fea8996.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"18ff0aaa5a5b2899df493732add41936c860c9fc","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.fea8996.0.tgz","fileCount":4,"integrity":"sha512-E4qgs7GFfB14hgLhNadB18O0CwtTfmykx8pJPoS4iUwGmv/xp+cw0SsNfRqWvStBtmTT0oI0zjNAABlduuy6/w==","signatures":[{"sig":"MEYCIQCFDOVSvaObOGg+H3kyRP6vQz94CBNGPy+nDkZwQXDGtwIhAKFFBRRXQGbJwxvCCmGqKfJELTbXceNtFc1v9YLgFgbC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547196},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"fea8996ee2f49d19e218846685d5eb64974050c7","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.fea8996.0_1707456879318_0.24330637712168213","host":"s3://npm-registry-packages"}},"1.0.1-canary.7f263a3.0":{"name":"tonic-minijs","version":"1.0.1-canary.7f263a3.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.7f263a3.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"030b946e5d50f6926d112888a8bb16b5bb0e9abe","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.7f263a3.0.tgz","fileCount":4,"integrity":"sha512-8yY2bJvDq4bBf+8KRvaNL1pT0DGUVnvyjcIkdsIZv8z8YWW41F2mLA3zZBWV1gEB8G0FdNVQ9jo36GjpiSkFEQ==","signatures":[{"sig":"MEUCIQC9Bb1QPhDhu4I0E1kX0f/Y7Q+nxrSCVNwHuJP34WVu+AIgY3wSBqFvxOcSCy56sm6QPYzxtVrwDxlUB/tRBpTgPdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547155},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"7f263a37fd13a08f6fd7110e1b986ab913151449","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.7f263a3.0_1707459762270_0.7749990731089316","host":"s3://npm-registry-packages"}},"1.0.1-canary.b48f0b2.0":{"name":"tonic-minijs","version":"1.0.1-canary.b48f0b2.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.b48f0b2.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"2c27859ed8d854c2ff20d315c5144f267e5aedb8","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.b48f0b2.0.tgz","fileCount":4,"integrity":"sha512-vs/PZx8P0XhtyTJkTnT3bNhO5fzpmv2QKDCGCVT+6MK1jsaR7fOH4qRHd6JDAiGUgKf6mFTOLHVi1wNjR/v3Pg==","signatures":[{"sig":"MEYCIQCUsyXBZGrsPE5wUlt/BKitHfhSZQktNW2QVhgmMTqchQIhAKmv5hEzojlpUda4ykbvI92oGKRqaYc0N4vom0Eg3mzO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546774},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"b48f0b28a4da5cb8a17d6006d3d35468cfe38d4a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.b48f0b2.0_1707461010358_0.023421199544723326","host":"s3://npm-registry-packages"}},"1.0.1-canary.99d2597.0":{"name":"tonic-minijs","version":"1.0.1-canary.99d2597.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.99d2597.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"bb9166b8fde584e6fbfc7db55de3e5f28c3cba5b","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.99d2597.0.tgz","fileCount":4,"integrity":"sha512-biyMsS8AcdaO4AKM3WYFJU8MM3ve3ybEvmU56wb9Wh6h74WxqFMejfuSJIABT6a7dPk4pNT89eVv0ZcrvZiWCQ==","signatures":[{"sig":"MEYCIQDdk5zWkh//njeuneAYd09mi82o199Af5H3D0IyqWU2EwIhAKwE/QhMp4Yi8esFbdMG3Ubq1/YgL2cuj2Q/bPe/dSx2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":547810},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create a `dist` -> output for MiniJS.\n4. Run `npm run dev` to run demo page locally.\n5. Run `npm run build-watch` to run build when code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n- `last` - returns the last item in the array.\n Usage: `array.last`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n- `toggle`\n Usage: `array.toggle('item')`\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n- `nextItem` - gets the next item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item in the array.\n Usage: `array.previousOf('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"99d259704470b2251ea031d8af02ac1557c3f83a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.99d2597.0_1707461957762_0.41457099668235053","host":"s3://npm-registry-packages"}},"1.0.1-canary.94c85ee.0":{"name":"tonic-minijs","version":"1.0.1-canary.94c85ee.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.94c85ee.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"47832bc04f9dee7b325bb0a1031563660576aa40","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.94c85ee.0.tgz","fileCount":4,"integrity":"sha512-AIG5PfHUfKGoX9oatL+jcB9O9I3NP+f1rj9k/vHIo7oZfaIyrO1VQdITSPjujYieDNX+vT+zM5zUlJ4I6mSmUA==","signatures":[{"sig":"MEUCICIytxYdWbyCnSgEINT0iJrW/B6VTGQPek/rKUxxqIUlAiEA8ujZf3py5M+4eqKykJa9BKvA4tziADqd0WwLCxP7SdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548286},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"94c85eea0e0f4a6b08e3eee85b33cdb33e5d875a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.94c85ee.0_1707549935320_0.420433048121136","host":"s3://npm-registry-packages"}},"1.0.1-canary.f28c565.0":{"name":"tonic-minijs","version":"1.0.1-canary.f28c565.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.f28c565.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"9dfde476c866804917f120df271d4119eb16fc99","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.f28c565.0.tgz","fileCount":4,"integrity":"sha512-TDG7L9wwcWRSlV6eleJGA6olNfmb+9U/MhnouYHSBPBfEx2QwedsMLhlOtFpcSWdqF1+Mxboji/mO5C4uJ6Few==","signatures":[{"sig":"MEYCIQCuEIJ9GLYhPS3H8hBy6rJrDKdPFk5Qb8FEGOcT+89D9wIhAKXGcTwKsZ2Na0SIWufjcl+e7lp5+h/zcN8znKVATNlc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548758},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"f28c5657b55917888622b83f22fc6131445a2e05","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.f28c565.0_1707550399540_0.693119380533403","host":"s3://npm-registry-packages"}},"1.0.1-canary.2089454.0":{"name":"tonic-minijs","version":"1.0.1-canary.2089454.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.2089454.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"84758d75d43e3863cae1440bee3a623ca8cf7759","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.2089454.0.tgz","fileCount":4,"integrity":"sha512-3nDoUrpgE9qQuJjQisTJLB5DeH//1aPpUZt4T2ZfVp/7f6S4rPY/+o0gWnmP3yOcT96y1ldZgL/WfEqWmv8xCw==","signatures":[{"sig":"MEYCIQCA3m8YE/CL/MaAssdNHUWTrIlz/mTaps/Ojm0+HcHMgwIhAO9eVN7ByS+JqCMEQ57516/0iTORCicRSgShqBHnSKJr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548668},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"2089454fd97e07dc8a8de4b9ab35ec94e577469a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.2089454.0_1707552974779_0.29040361143518667","host":"s3://npm-registry-packages"}},"1.0.1-canary.78a3925.0":{"name":"tonic-minijs","version":"1.0.1-canary.78a3925.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.78a3925.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"d44d3ea2b9923a7ad7d778908e476114e86c1149","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.78a3925.0.tgz","fileCount":4,"integrity":"sha512-WbguvP55wwZJNDt3m6iR0iPxhYibd20ffyORwGl7G++3Zjw0pfHv5+grABDzxaCuvQY8VtPVpbRWlEveSz9ejg==","signatures":[{"sig":"MEUCIQD0YNSgsT44gLhrnepqh+libS+YMyGIoYtLQkJTib701wIgLp+SvsQN4iYEql2HR0dD5DrxKXQWWAbqZlkDy3P/GtM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548766},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"78a392528a3c99df36d239e21f17af4e590e1503","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.78a3925.0_1707561422929_0.6398858543686088","host":"s3://npm-registry-packages"}},"1.0.1-canary.2bca46d.0":{"name":"tonic-minijs","version":"1.0.1-canary.2bca46d.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.2bca46d.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"2ba36b37228201678b7179c000e9f406e2c3340e","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.2bca46d.0.tgz","fileCount":4,"integrity":"sha512-5K7dDs4oW+OuMEEY0i5JacS/9vpFbnDjGBzdOVCAEyDEKYdElRNZECsBzabXjYAi9WLmi/njctjB8HTfDwHFOw==","signatures":[{"sig":"MEYCIQDWSUxhmPzNc3tNq6rEHHZhXS1G62TYEVQb/24W3CDiVAIhANSKVpayKb8AwqVvXHc4bXLVp6rh3XcyFRfMBwYsY5LU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549204},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"2bca46dc397ed7202efd7f6f67d9e9a24f8d7e58","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.2bca46d.0_1707575092523_0.8794662454817241","host":"s3://npm-registry-packages"}},"1.0.1-canary.6495dda.0":{"name":"tonic-minijs","version":"1.0.1-canary.6495dda.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.6495dda.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"34e0d10f87448d2ee29852f6f4c23998d7de92e6","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.6495dda.0.tgz","fileCount":4,"integrity":"sha512-+N6+IsKEo3kZkR4WYwIXJL9oSYBxIwqIXe0TtC0rUSwTnYnHDqgfxQYUa54zfCCgrPQXd38HZT22GDmW0Y2YwA==","signatures":[{"sig":"MEYCIQDDrVP6KsFBIh0E8Ix87sHNfsk2MtvEfdgSMdZxE9I6MAIhAPbg5PggKMnT01u7rMyfKQC5yAHclFZ/zIPIkMgcKI0N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551184},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"6495dda3055d7c27accb99e1b048d80d9eb5d001","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.6495dda.0_1707715346188_0.08645879661335054","host":"s3://npm-registry-packages"}},"1.0.1-canary.cdefac6.0":{"name":"tonic-minijs","version":"1.0.1-canary.cdefac6.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.cdefac6.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"521f309f50e5c09bde1676bdf2f3cefff78d9779","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.cdefac6.0.tgz","fileCount":4,"integrity":"sha512-B6rw9sDh/kMw1PTs2HsEMjGKznf6FCjXLsbq39dWbqUxpin7pjl6tVCRTogRdCTreT1/H1QiSg0sxO+8XAwZ3Q==","signatures":[{"sig":"MEYCIQDRoCptGACShnb5Eubmda26guJSiOs2yfamq7IUKHFltgIhANjb91YmwO/EVVABt/Uz4h+BCuDkeuRUkEZSLWVC/xXO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551142},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"cdefac6a64b344d7f346816b8642f3b9603abbb2","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.cdefac6.0_1707715353738_0.6206425997952332","host":"s3://npm-registry-packages"}},"1.0.1-canary.9.7bf50b7.0":{"name":"tonic-minijs","version":"1.0.1-canary.9.7bf50b7.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.9.7bf50b7.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"1fa8da68913f570f7f89d550f58f7bd9c06701ca","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.9.7bf50b7.0.tgz","fileCount":4,"integrity":"sha512-570YzYf+8SQz451UGyppO9vBK+h0rH4fDCaknyZrBH3O8jcv/U+WP/UgllyEtuSKo4yrOKd0S9BB9PiUi6mmhQ==","signatures":[{"sig":"MEQCIHukWG4Ye8CQtPLc23ELS3QESfkjJxvbgmnsqRjH2QrmAiAF/3riIyWnmzd8yqLKs3m0xofBM6U2Ys7RVa0L4V/CLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551186},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"7bf50b75657442e3dafa1f5dcc3c87bbc2196d2d","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.9.7bf50b7.0_1707715454189_0.8473605500264041","host":"s3://npm-registry-packages"}},"1.0.1-canary.10.2a0246a.0":{"name":"tonic-minijs","version":"1.0.1-canary.10.2a0246a.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.10.2a0246a.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"7418835d3bd84affbc0c79d4ec1a624b25871019","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.10.2a0246a.0.tgz","fileCount":4,"integrity":"sha512-56JfDvNZ6HaRthVXblJdn1s8vXmp+gqtug1W9Py62JZthn0LYiFUvMop0wOKqqZbvoif5cJ68EMGWcQbk18i5Q==","signatures":[{"sig":"MEUCIQCyDNPibssV73GrPRAtZ+Y3QAJTv3rg3R6xUVF4h2KyWQIgWk48a4/0PRhv2ug9DQlf5hkOYUabGkgIUuU4iJ8qgIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551145},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"2a0246aff1eb4184abe9724a0f007d0de6b46dfe","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.10.2a0246a.0_1707715565152_0.8216406282296338","host":"s3://npm-registry-packages"}},"1.0.1-canary.d2a02d1.0":{"name":"tonic-minijs","version":"1.0.1-canary.d2a02d1.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.d2a02d1.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"f8bbfc2e0adeb81fe7ef5a7e6cf2cda20a0e1f53","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.d2a02d1.0.tgz","fileCount":4,"integrity":"sha512-Zw5DwsEQKfVW1PLmXkx4vXoLoWKK01igB08cqjlfLqGkvbsurXmE9FBf4pfIbOFKOBaq4CHsMjBN7Ty637rkiA==","signatures":[{"sig":"MEQCIGd3T8+X+KiFOLJpYgFk7oVA8a7lB5WKpKva7oxpmkI+AiAfiPnCM9aAghv15uUEebcYWA/ZemXreV/HfF5vX/K/GA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":556358},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` - loop through an array and render a template for each item\n\n## Variable\n\n### Variable Scoping\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\nIf you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"d2a02d108b47582b5129e44e4ef2c7b109d7b28b","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.d2a02d1.0_1707737026463_0.9927193501884397","host":"s3://npm-registry-packages"}},"1.0.1-canary.11.789f5c1.0":{"name":"tonic-minijs","version":"1.0.1-canary.11.789f5c1.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.11.789f5c1.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"290fb740e152220ffed4d2db634e12d5be6f3ce7","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.11.789f5c1.0.tgz","fileCount":4,"integrity":"sha512-YPP3q7ynOTJrttiE7mdiBQ81T+hYBueiwoKHtJ0TsvSWCEXE405BsCpwn93M+O8fKgeUn0fJiIG9EPd1SgsKvg==","signatures":[{"sig":"MEUCICVDdOSAroqV/pS6m07indSaStP/xyVZoBlPnGP4B5ywAiEAvFGSDbmxQZ+Z/+WIdyhz5yqk4SCCoT4J1rwFxAtPLg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":560642},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"789f5c1d1a86b80f42952bd6b80c88ca41a29f87","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.11.789f5c1.0_1707881715263_0.038857205591158905","host":"s3://npm-registry-packages"}},"1.0.1-canary.11.d4ee575.0":{"name":"tonic-minijs","version":"1.0.1-canary.11.d4ee575.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.11.d4ee575.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"ab59a81688b8e33d07256e8d40e50b98cba2d2ae","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.11.d4ee575.0.tgz","fileCount":4,"integrity":"sha512-taAB2iUebCI+QUYdOcvFN7/pKvKBz24L4B3O+EKAah+6JjFI4/WKUuCSLWu3o7cdRRqvpZUjAIIKC4mFRJKMCQ==","signatures":[{"sig":"MEUCIQCC6zhAg2t/hf+VAsvvKutadO38oke1V0MkHfjyVj1zKwIgIiQ9GeFzB0WjHyhwmv2EltEv2/H283UIBNdKjEKIB48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":560661},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"d4ee57553d50dd448736b8afbbefc5baccdc5cc0","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.11.d4ee575.0_1707883504046_0.39930974022169563","host":"s3://npm-registry-packages"}},"1.0.1-canary.11.b216062.0":{"name":"tonic-minijs","version":"1.0.1-canary.11.b216062.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.11.b216062.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"8f55c6fb9740ed28bc85415e0740a2fa836fcd84","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.11.b216062.0.tgz","fileCount":4,"integrity":"sha512-P1ABHFZxQcw9QAhpC1QRhszf1pDLvc/nM6yOVpqBhS6FU+pg0souFxo2ztzItjdRwyzOxmZbkb0y/eJ3rhkSaQ==","signatures":[{"sig":"MEUCIC47VE+SFSExn7yS1oYrrIb6aidarDdEi/Ywf7AZUAZVAiEAvy+DnWz+qKWLymxIv8lS2Fv627s01MJsbsDCJkYIj9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":560656},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"b216062113ab92a60ea02661f1b397b82d412484","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.11.b216062.0_1707883543425_0.9091431982131741","host":"s3://npm-registry-packages"}},"1.0.1-canary.11.0008af8.0":{"name":"tonic-minijs","version":"1.0.1-canary.11.0008af8.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.11.0008af8.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"64a08fd0640d8da6fb3e055d77487d77a6997a9e","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.11.0008af8.0.tgz","fileCount":4,"integrity":"sha512-m3lVqC19sPgQCn2A/02sb9y6xHLHkI/dicV6PZ3INAen8/OnQmgC2P3BCe2VNFNwLT/873BiwnPnOnrP90gKLQ==","signatures":[{"sig":"MEUCIQD1W+tf29B7GXmC1Hpchp/+sOHLEHQUSkgoVcNPvpb9twIgVFy0YAII71ajpamkmxGuxy998rZK5T5Q92j83C2gmY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":560952},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"0008af8a653d8ca8cf9bf1b75f02a98233fe6b6b","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.11.0008af8.0_1707884042988_0.5329278607927364","host":"s3://npm-registry-packages"}},"1.0.1-canary.11.a129aa8.0":{"name":"tonic-minijs","version":"1.0.1-canary.11.a129aa8.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.11.a129aa8.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"4780128fd9577fd0072cce6d81f48449e878323f","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.11.a129aa8.0.tgz","fileCount":4,"integrity":"sha512-h2H/76OjVgPU8TzNG4zgoHhmzb/wRaok0NNokjGzVwCrocbmdcftV1p6qK0RfPIOcOuwd5ii3czs2bDz11G00w==","signatures":[{"sig":"MEUCIHbUsdG5cLWEcBNNgxZ36CZskA2iRTsPDoSIDzuBR09FAiEAuLThHmNHD+Bi8j9lptWTWbOMDDR25aEnJ7UQBhkCi14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":560952},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"a129aa828ab43df717832911dc91eca9fda333f1","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.11.a129aa8.0_1707884151453_0.16397700980008745","host":"s3://npm-registry-packages"}},"1.0.1-canary.17caa09.0":{"name":"tonic-minijs","version":"1.0.1-canary.17caa09.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.17caa09.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"3d684168ffac58d79ca69686eb8b57a9f5b98628","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.17caa09.0.tgz","fileCount":4,"integrity":"sha512-qqz8hfcdQEvw6Kxjga6VZQaZlOscnuQBnDkmb6G8esgCMwaO/4Iv83y8tOJ0ja8r7IGpN6DtnxrR2/3zvldfyA==","signatures":[{"sig":"MEYCIQC0g3mqwDMahtkIkUmc/Oud64/2Wx/vx8TXjKG1RXdwgwIhAN1Dod7bnpm3Bj/ZfcaafuE3msXjMzflo1c2Ux3eGp5C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561900},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"17caa09a53e0e344d26576d8d09b196030e9b264","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.17caa09.0_1707885709340_0.4125708144326188","host":"s3://npm-registry-packages"}},"1.0.1-canary.12.9c978f6.0":{"name":"tonic-minijs","version":"1.0.1-canary.12.9c978f6.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.12.9c978f6.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"205095d02ab4b629fbba4fac78d7b7c5f7608853","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.12.9c978f6.0.tgz","fileCount":4,"integrity":"sha512-g0MSTQvactq54VTM0NYF+tOYONvpc0095qwiA3YdmxhwOoGstrADMHBJHil7cpePvpf90xQsru8UFDOsr0ho4w==","signatures":[{"sig":"MEUCIC7Y/4PBB7faRHlVV8JRt/h9fSJjzPlj6xE4ZwUq9bELAiEA2Nw1F+Q705SV5vspwqIRH5uW8zjyj6UWxZnREaFvU20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561903},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"9c978f636ff503c4efc803728f0b743134689bbf","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.12.9c978f6.0_1707885849094_0.19021427093455445","host":"s3://npm-registry-packages"}},"1.0.1-canary.15b10bb.0":{"name":"tonic-minijs","version":"1.0.1-canary.15b10bb.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.15b10bb.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"e15e2657ea34790653e707514b9cd1378aabc905","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.15b10bb.0.tgz","fileCount":4,"integrity":"sha512-F5bPoRFOJqGPLu9tC5GXYRtxhq6B8rXlLaNYhEU1gJFddC1sMiurnkaHSGzljMpaJkTtvvB0DXw7+sxiMSsIOg==","signatures":[{"sig":"MEYCIQCrqt4RjtbTrknZ8DOJeKrQjMRnCtE6CZMNY8JXSuiCOQIhAK9Bw3N/yYyljuH436dB5JORcQPLEthGGnoM9IzBJT1Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564008},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"15b10bb58ba49ef912b22d5658601567b2633610","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.15b10bb.0_1707890715838_0.2629284399175793","host":"s3://npm-registry-packages"}},"1.0.1-canary.13.f038549.0":{"name":"tonic-minijs","version":"1.0.1-canary.13.f038549.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.13.f038549.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"5712da86a9bd0b6b73a98468f8c0e39868ef1dd1","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.13.f038549.0.tgz","fileCount":4,"integrity":"sha512-RY0tVLObT7/bNan6G3mB+QCD7nHPel2eN6NLnCduyz9DgBHSQNVmqIBaG+7SCnvowenue+aitZe0PfpcLFeF6Q==","signatures":[{"sig":"MEYCIQCRqSa7K9Z6N+H0Qk2mfvchL67C74+Te2EamjuTJvqf3QIhAJ3VRkGGx4J0ycP7zo4MQ9aCjJTvT2vziWljZLnYD2Ck","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564371},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"f038549a1dc9e1f5ffd741121de156d5e98afb5e","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.13.f038549.0_1707898159911_0.04257716664859679","host":"s3://npm-registry-packages"}},"1.0.1-canary.ba60d67.0":{"name":"tonic-minijs","version":"1.0.1-canary.ba60d67.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.ba60d67.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"a8784d02547fa1e5f1113d251942705d8f6e0146","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.ba60d67.0.tgz","fileCount":4,"integrity":"sha512-GVlnZG95F6XJCvlpKO9Wou+YH3PoAxVaId1EE2t8A+xWr8mwpDL8j+sk2mv0UutmHQwjuVVpguZNa/ruKJiw6w==","signatures":[{"sig":"MEQCIFTCr4dzwmVt0TNj2kBWgTzJGD+K+u+1C4ZjwYZ4YuPqAiAitOJjsAGsIp6gRaw/OLftu2ENnGTlB/6S8dMmNj7msA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561803},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"ba60d678abe45c056c60f5abb6c167ef9f55c9c8","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.ba60d67.0_1708050322837_0.4286817272344239","host":"s3://npm-registry-packages"}},"1.0.1-canary.19f62c6.0":{"name":"tonic-minijs","version":"1.0.1-canary.19f62c6.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.19f62c6.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"8b151ae032871a94b610b66e765319b4c4004973","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.19f62c6.0.tgz","fileCount":4,"integrity":"sha512-zErejDQvSTgnV3JDSqpyTAuZsdViZV34BEQXsyrr9muSxExLtDNyBKMRVGUCpqdr0nb4cHvIroufSv+P1qN/xQ==","signatures":[{"sig":"MEYCIQCs7GhSKJVElBAGkISlA0Gaau4kMcgqi2TTgBcEtmELdQIhAPAPab5SwKQxUw4WwiZRb2sQ/bA1dKT5ADMKEnXxbUIQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562458},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"19f62c64515accd0469da46fb618a461c73027e3","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.19f62c6.0_1708052453692_0.08927055016818386","host":"s3://npm-registry-packages"}},"1.0.1-canary.87c237a.0":{"name":"tonic-minijs","version":"1.0.1-canary.87c237a.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.87c237a.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"b1684bea5d0dc7535c7ed7876b6c8208b40a6d8f","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.87c237a.0.tgz","fileCount":4,"integrity":"sha512-tbm6vvcMruFewov3ZssU4a7k7VHILZVuLQcqFo6Pom9DrdAUkokfvftepDtFrEPRmKoOfg6cauusUHQ0IMgjgA==","signatures":[{"sig":"MEYCIQCRsEoxq4rqc77Vc6hSxfcYvKsON0UktMXNHny6C5kfDgIhALsd3Babg5rjhRBd5KoFSdKCXmqczRPy2R5Qo2pa70i2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562589},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"87c237a8b878d5ddaea33cdfe26b8e759238de9e","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.87c237a.0_1708053283934_0.9868258346583529","host":"s3://npm-registry-packages"}},"1.0.1-canary.13.2bc453b.0":{"name":"tonic-minijs","version":"1.0.1-canary.13.2bc453b.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.13.2bc453b.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"0e707ba4206f5a4c8c6593293b59b3cd8545ef89","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.13.2bc453b.0.tgz","fileCount":4,"integrity":"sha512-aUdVrFgbLBNYiGCccWeuTQsJd3LDdpL7p5lLjZxwgDvQCwwsHZ0HR+kCZEGrmlTMatSKdYqPElAhaaEq54HRCw==","signatures":[{"sig":"MEQCIGfUDkvE+wg6Nnx3Y+cE8QMvEf49NcBu3aQY4cteUneXAiAaW88YCX0bPaYpvRu4MT0bjzXAwMJGGqSucfo9dX1+SQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565060},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"2bc453b075b1aa91fb2051d0af7022578558f64f","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.13.2bc453b.0_1708053607507_0.027858970311566367","host":"s3://npm-registry-packages"}},"1.0.1-canary.13.2e85fd5.0":{"name":"tonic-minijs","version":"1.0.1-canary.13.2e85fd5.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.13.2e85fd5.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"c59cac82d06939d89654827a753343469c52dd93","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.13.2e85fd5.0.tgz","fileCount":4,"integrity":"sha512-0vSCzN89Jtn7WXZ+w5otCPx4Zlzi8KiUpTGuDaD87TIIIdlNB/toTZP8C0hPABEeluDAbN7fDFtWSFSlTVRpLw==","signatures":[{"sig":"MEUCIQCBCmGkw+0pK6oSxpUgB11XhVYQnl/Sz4EwuF8hMkL1UQIgNFAwF50LfyxcfgNz1dtUMie8erwOND/32fmM/9G5bpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565719},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"2e85fd55af437391f6e8165588eea66ff5ce8e9f","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.13.2e85fd5.0_1708055244719_0.04342474571445876","host":"s3://npm-registry-packages"}},"1.0.1-canary.13.6366e73.0":{"name":"tonic-minijs","version":"1.0.1-canary.13.6366e73.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.13.6366e73.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"f792201e1934111ead1bcb58fcdc60c56e9a7e5a","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.13.6366e73.0.tgz","fileCount":4,"integrity":"sha512-QwqBgqtG/3gfl7fBLdsAhV+QDDQAwTbmPHYenLf6Zwb26+mnZPXPtmN9ViYGFxKrpeHye1pppd+hlj5LWA1fDw==","signatures":[{"sig":"MEQCIHHOQ6tkh5CPC3cGYmxf25qkAa/wHL5RhtPWgnNg7wcYAiAlk89oyaU4biTaYC/W8pY9/+1cAzMQy45U3bzRPv5sKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":565896},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"6366e737705d9b73c90f14bd40bc54915668c78c","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.13.6366e73.0_1708056633189_0.36793728127287983","host":"s3://npm-registry-packages"}},"1.0.1-canary.13.97b1abe.0":{"name":"tonic-minijs","version":"1.0.1-canary.13.97b1abe.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.13.97b1abe.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"579a0fa743f627ee5497031dbb9cc47dcf98cc1e","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.13.97b1abe.0.tgz","fileCount":4,"integrity":"sha512-cm5NmikyXw7gnkupm8TZ2YKSkCGd1CQNx6NE7Nmn4g4FAdqUbelArFA+tS3h9+QSMXjzrTWuMwwr4N4RuPtjLw==","signatures":[{"sig":"MEYCIQDkNfYrzBQK4/6nI1/zIs5mg3WhsE9Na/K1EGbs85CHZgIhAKCrhpdEDMaRwKJppupTmhQy+T1bWxFfsE0QsYyeTGWh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570470},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"97b1abe3ed0ce8f9b10adad1c11efd9fc1b6d6a5","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.13.97b1abe.0_1708060393916_0.3137728509500568","host":"s3://npm-registry-packages"}},"1.0.1-canary.13.3b2fd84.0":{"name":"tonic-minijs","version":"1.0.1-canary.13.3b2fd84.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.13.3b2fd84.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"dd0a6a8c96a20b7dc8557218da99b70be3f0f41b","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.13.3b2fd84.0.tgz","fileCount":4,"integrity":"sha512-IAMDoTAn39o3CA7pdDQD/PJxATFkY4SW9wUssj/0V/Y/tOCqEgd1Mz/diUMLLKmzbR9t/Qz/TkavjSOME2NvIQ==","signatures":[{"sig":"MEUCIHcsZ8JgkYByOY5h1CrwRiOW+GAl7UthAixPrSKndWnTAiEA5h6q9PXMacgT00gYi7sVqsov4NOyeirGuhtRqH1ltCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570460},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"3b2fd845de90bb45de400f10204c4aa55b05d413","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.13.3b2fd84.0_1708060585962_0.1571654712486441","host":"s3://npm-registry-packages"}},"1.0.1-canary.13.d0074c8.0":{"name":"tonic-minijs","version":"1.0.1-canary.13.d0074c8.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.13.d0074c8.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"ddd7ddda5269886c540a2527754c32a7ef7ddf90","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.13.d0074c8.0.tgz","fileCount":4,"integrity":"sha512-Br52W40LvVuJzxnI8aNMpFgiIUg3yaMjUiS8UAOYK3AMpylSby+96CuDW9Eaq0Ctlhx6fBkZ39tbO03m0C13VA==","signatures":[{"sig":"MEQCIAEHGSub8dQrAiKazWre9b78md1JLk1os5/VdeZaF9+EAiBG8pRc3RNmZtMQG04BD1DPnwDWosSOcUKnQzYyZIvZCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":570460},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n- `:each` (experimental!) - loop through an array and render a template for each item\n - do not use in production\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"d0074c8ad6d790eb138bdaf08178a4636b0bb104","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.13.d0074c8.0_1708060965479_0.20674797382539256","host":"s3://npm-registry-packages"}},"1.0.1-canary.74e23af.0":{"name":"tonic-minijs","version":"1.0.1-canary.74e23af.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.74e23af.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"dad8a21ea962b72ca1454e6b4d02daaf00f8748b","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.74e23af.0.tgz","fileCount":4,"integrity":"sha512-fhLdaWKSEhnt3AYtWqkWKT7lGvOjJb+vOPiP3dfDnsdxWmGueEIxltzdVddZUmgQCoswsJFuabDUt9A5iu5xHg==","signatures":[{"sig":"MEYCIQCbji4uXOmZSRCtX7f7MOK7ImI6wPGWOSLqS1wuGaM9EgIhAIVabTNufx01ttmKKFebtAuSm9dPoWwZbkk4YBrmI8WN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573227},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"74e23afc3e5e44c76f73793fc0a8229d0fc8457c","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.74e23af.0_1708062126316_0.0076978193930046235","host":"s3://npm-registry-packages"}},"1.0.1-canary.14.a9952b4.0":{"name":"tonic-minijs","version":"1.0.1-canary.14.a9952b4.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.14.a9952b4.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"46c078c7ac385ce5635b1fa84115973879e06233","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.14.a9952b4.0.tgz","fileCount":4,"integrity":"sha512-3J2f7NPkHjVd6nAg7vA4b95KLB8Vv/uLCuHNFGHDjpFoIXITKis4lR+2i7Cz3vbL0Amlas7sTF2i2t4a/MxPjA==","signatures":[{"sig":"MEQCIB/2Zey+XV3nPdQTb2RwDfSLoWblyRmqnJFpicLErRx1AiAJea4b3SpBa4Q8eju22Evc+nySLw56kQk/xlPgXdvRwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573329},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"a9952b449de30851dcf7a7ede3d028c1f8e88cb5","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.14.a9952b4.0_1708071077128_0.7777298185478805","host":"s3://npm-registry-packages"}},"1.0.1-canary.14.e04b4d9.0":{"name":"tonic-minijs","version":"1.0.1-canary.14.e04b4d9.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.14.e04b4d9.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"303f64e7c54a627481ae93a606ddf0c5fd6025cc","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.14.e04b4d9.0.tgz","fileCount":4,"integrity":"sha512-3ASYUnRlILAQGFDIt473HXn4y59jMySrgl0mh/OJjsvimw253f/svBJOgHTO4ahhondmBQl/Y1MzTaHlyPFxRw==","signatures":[{"sig":"MEQCIE6mZRWpxN0TUR9MvHx2IhyS+wwc5t7d+KNam91ax0J0AiAegEv2hYtvC301n3Tj+ixnnrvLnnC6Kl8SDoX5Zc4H4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573731},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"e04b4d9c6903a8e1230cb19be6e322fc9a025d0e","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.14.e04b4d9.0_1708071922133_0.12036085110664319","host":"s3://npm-registry-packages"}},"1.0.1-canary.14.c535282.0":{"name":"tonic-minijs","version":"1.0.1-canary.14.c535282.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.14.c535282.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"fcdf5db77fd85269a935219f60e4faa5cf0be14c","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.14.c535282.0.tgz","fileCount":4,"integrity":"sha512-RX/jAJxV82TQJOWBTknKrEGsIfjYsJUPGFSnmtm25lBzZdUxKA4qsCoAbIhK0HmTR5sfh9RE+eNK/s5jW0Npyw==","signatures":[{"sig":"MEQCIDolMmWJz7RvQT/BPGHKMmnX3KFA48/JiMjLFKb7xzNOAiArn8nQrEg+D2GMgUDrnDIQHausW3v0GqQZn47cluM8pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":574998},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"c5352827ad9dc847c055086e32e2c04a9dc80b24","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.14.c535282.0_1708075808592_0.3375521718921244","host":"s3://npm-registry-packages"}},"1.0.1-canary.14.c08dc9f.0":{"name":"tonic-minijs","version":"1.0.1-canary.14.c08dc9f.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.14.c08dc9f.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"ff7354df37a335a0c480bbdda0e13eff0acd3acf","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.14.c08dc9f.0.tgz","fileCount":4,"integrity":"sha512-at5ipn7YC0zFrfYNJt2du781AChkb4WYzel80e9GyKhNY+5XY5TtTQX7Iy0N86z+tXDnz1m99iu81N8KLzl9+A==","signatures":[{"sig":"MEQCIDWLyz8pv1NDOL03cxHBB+jpNWfMSv4KXaF5HheoLobqAiAmzvxpbvsqMG9+rwhVRxCaSATgDibX6aQwHTovwr16uQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":574998},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"c08dc9f44338a2bd7ab5d5f302bee119d887bc50","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.14.c08dc9f.0_1708076984653_0.37629347989054596","host":"s3://npm-registry-packages"}},"1.0.1-canary.279cdd3.0":{"name":"tonic-minijs","version":"1.0.1-canary.279cdd3.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.279cdd3.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"943c84e875432afc8b828c2387c7913403e45089","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.279cdd3.0.tgz","fileCount":4,"integrity":"sha512-Y0GBdBny6KkOdKfxJRfL2xZ/A3q+o9gcIDfA6GfwQfps7pKJTmwqZiatvYZQfkuqM1s43P4RgyUQ/jxwcRjpxA==","signatures":[{"sig":"MEUCIQDqM4isOKTkmc6q/krKgWT6fpEtsgrLh7rzr6UV+gsksQIgEC7rwOOvNVFe0x4Gwkx3QwzYWZhtMUgB3P2OnBKCT9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575353},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"279cdd310420ad6e9db237c221f2a8bd8c21dd7f","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.279cdd3.0_1708320607590_0.36412916452444954","host":"s3://npm-registry-packages"}},"1.0.1-canary.31150fd.0":{"name":"tonic-minijs","version":"1.0.1-canary.31150fd.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.31150fd.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"fe73c5ae8e8e6dc1fbbfa5edd435469750de1356","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.31150fd.0.tgz","fileCount":4,"integrity":"sha512-OeVMuPihGY0S2mDGs7x5RMx4qaVV1w5P8tSI/7Q07T7VZ9ObEr7BctxzckOQ2vRqK8rOn+3LB8bO8D/rDZcCbw==","signatures":[{"sig":"MEUCIHn9AVKDVULpFqlsAiuA7SgZrjbaYRB1Bqm77ZcoIWOjAiEAnCMyPac4RC5YlNrWpDnkDhk0yrpHV3zGmkX0N64a9MI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":575973},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"31150fdd53e895ef6901a4ce40c30f2983ce9146","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.31150fd.0_1708322302784_0.7740562748487632","host":"s3://npm-registry-packages"}},"1.0.1-canary.436e932.0":{"name":"tonic-minijs","version":"1.0.1-canary.436e932.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.436e932.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"9bf81b0ad89d83fc83d9c8eea3131e73046ab284","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.436e932.0.tgz","fileCount":4,"integrity":"sha512-MpPQvtgTNVA6SFpmLwfM1uJtEe++4Wk8nQBlBGCBzVFlJWMqddlxh2mAQYL10aioofo7T27FdOsw8yQYb9rVZQ==","signatures":[{"sig":"MEQCIEvszEgHmCKLgBnGSMGdcLFPsL0RgaT1auAT0BmPFODEAiA+GD2KzRHJeLSXtqIZK7HrHzx5YatCwfO/Rgbj5EhXgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":579173},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"436e932a6a74e181ebe169b2d94987af7a83c015","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.436e932.0_1708334796930_0.27099380090633596","host":"s3://npm-registry-packages"}},"1.0.1-canary.15.19aaccb.0":{"name":"tonic-minijs","version":"1.0.1-canary.15.19aaccb.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.15.19aaccb.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"0ca9a6f077ceba1642b7fd61fae378ebcc26be76","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.15.19aaccb.0.tgz","fileCount":4,"integrity":"sha512-OYx6gEXtPGg8tQ1EijDqJSa1aezYAJ9eYvAeA1UkbbaDqsUmL/acBGNv+XoE1H8GfC8Xxa7390bmYADShaeoFg==","signatures":[{"sig":"MEYCIQDJ30Pg5QsY7Ak8ycIx/S/BVJkk+6/DnROwUPSvb45IlQIhAJ0XwMbBqdqTlegy/weLYejKjHLiIXu6Wkavef6qarDL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":579176},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"19aaccb74c83a188a7180deabf4d4ebbf66e5adc","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.15.19aaccb.0_1708334928424_0.43195374291409383","host":"s3://npm-registry-packages"}},"1.0.1-canary.52905a5.0":{"name":"tonic-minijs","version":"1.0.1-canary.52905a5.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.52905a5.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"8ee77321311eaa58e918bd7757390445de62397e","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.52905a5.0.tgz","fileCount":4,"integrity":"sha512-aWthzPvEW6W3hinc+Ymu0X1p1o6pPTXgb5InnzfxZ2eGCiru1XonqZ1iTN2KCB7cbFBoWqe8aGAQ5miY9/1rLQ==","signatures":[{"sig":"MEQCIA1vlfzgxnoTBqYlsb6GCuE1rL/zj5V0z5uE7x8W49OCAiB2Y9//Nt/nbbV3r3vkHaeXJRG5lB6Kb/JZ0HcqsovnlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":580476},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"52905a59d50a2a2295ba95bd3c657cf37902260a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.52905a5.0_1708337113597_0.09678397947262218","host":"s3://npm-registry-packages"}},"1.0.1-canary.dd97c1d.0":{"name":"tonic-minijs","version":"1.0.1-canary.dd97c1d.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.dd97c1d.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"1df6ba3e7f5f0622aee59b50d2848f25d16306d5","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.dd97c1d.0.tgz","fileCount":4,"integrity":"sha512-FKPUH6snEEqiVbitXQ2lv6LoM5OBPcE9uu9n2eM+jmgRTwU4IVV/sB9ZTXQ/s6pZ1ezF5tONhxpBI/PrRECFVg==","signatures":[{"sig":"MEUCIQDos/aNA30JMqpQQVZ8Bz9FHA1PXodCGBSspC/CSrJ0fgIgcuKVYH3dcYZghHs4Pu3hEhhNdEif3rXRdvXt9441T9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":580450},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"dd97c1d4f119c7821f80a5472899e28a94899304","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.dd97c1d.0_1708337270807_0.3384721420616055","host":"s3://npm-registry-packages"}},"1.0.1-canary.ec88dca.0":{"name":"tonic-minijs","version":"1.0.1-canary.ec88dca.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.ec88dca.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"0e18ab73d12d690156127e3a8b9829c02d8b2494","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.ec88dca.0.tgz","fileCount":4,"integrity":"sha512-krwqHOOn2FFwCNayp+N2oqM+sGhov+Ixy7Yx0ZOf4qUScnb5VASNgbFq+GOHO5z72cH9x/c4jKbwWBCKh1Qcag==","signatures":[{"sig":"MEQCIBitXsd65NS2Y7KVKikVbWxeigD+zSFLZ5hy2v4d+sigAiAMXX+8Nv/+fzJOLZA+YnO4mfC73daUjutt966QbGsOzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":580450},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"ec88dca3ddcaf7d17369459c1f3cb50dcc1aae00","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.ec88dca.0_1708337500587_0.15453090969438965","host":"s3://npm-registry-packages"}},"1.0.1-canary.1d0892b.0":{"name":"tonic-minijs","version":"1.0.1-canary.1d0892b.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.1d0892b.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"1f6fd28db49a5b40bd92e8f4729894ae18f3ee8a","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.1d0892b.0.tgz","fileCount":4,"integrity":"sha512-BZW8y3lSSqcs/7aZF+fmSky88sFygyBuS3eQgOxhPFKes1qOAzlqX69ApcZJhSEKAXBpav07B77ktyeoV9sb0A==","signatures":[{"sig":"MEUCIHxVi+kwWJSQxedMxg1KPRL473H+gAHkYhO2B/oubBuxAiEAr+Rup9EjqYd1MFpLiTwWm7qPlRW1mzGpQSRq5uNUiyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":580410},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"1d0892b509cf805a43e983085a1e191c9c10405d","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.1d0892b.0_1708340484026_0.5270650864002717","host":"s3://npm-registry-packages"}},"1.0.1-canary.23b565c.0":{"name":"tonic-minijs","version":"1.0.1-canary.23b565c.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.23b565c.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"49745b9fb7f5965b2c300ae4eca1a4b0f8af5998","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.23b565c.0.tgz","fileCount":4,"integrity":"sha512-2QCZArKkTaTPXWEhoHFupksUWgej0oq5Dcjfx50X0va3XaBU9+qUo+VfYTrjBAsXJTzkongv7sNdJGR7EpJSYQ==","signatures":[{"sig":"MEUCIQCNb0juN71b+Z1pWlPQaUqN2/ZDl4cze1Ki7ELkKCnxqAIgH4n1sEm1B0S8p0Fg8EVRocR6o2QpiNzMI3I1q0smFoA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":580694},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:keyup.up` - This will trigger when the user presses the up arrow key.\n- `:keyup.down` - This will trigger when the user presses the down arrow key.\n- `:keyup.left` - This will trigger when the user presses the left arrow key.\n- `:keyup.right` - This will trigger when the user presses the right arrow key.\n- `:keyup.enter` - This will trigger when the user presses \"Enter\".\n- `:keyup.space` - This will trigger when the user presses \"Space\".\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"23b565cb6ed8c3eb9e64f602a8d7448c6002c8c4","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.23b565c.0_1708341771062_0.003692526046592537","host":"s3://npm-registry-packages"}},"1.0.1-canary.cd1b1a7.0":{"name":"tonic-minijs","version":"1.0.1-canary.cd1b1a7.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.cd1b1a7.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"ae55435d85051e4b50e133ba2074eb2bd92c578e","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.cd1b1a7.0.tgz","fileCount":4,"integrity":"sha512-90c+VloXtWB1conrqR1S13X2VXiY8MJherD6T0Kx2V0bQjxtFUU3oWZ3C7lMIKr33hfXxm27TAKuah9zYR7i3A==","signatures":[{"sig":"MEYCIQDE+EYpMkBXE4zC/6j2mgOnAREcPiqjbTAnAumL2RtrOgIhANZLtey8KDBaHdjbjQEwsYSvZqmWOoDYZ2uYC9n7tTKd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":580323},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"cd1b1a7bfa24c9ad6a0ddae06efb5714512733ed","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.cd1b1a7.0_1708403948773_0.3476816498881894","host":"s3://npm-registry-packages"}},"1.0.1-canary.c776dd2.0":{"name":"tonic-minijs","version":"1.0.1-canary.c776dd2.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.c776dd2.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"063919cf0fca580226597d9add23926103ad9ee4","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.c776dd2.0.tgz","fileCount":4,"integrity":"sha512-/uPviz/bf6ABgi+q9zLUjge7LLxcQWaeMxy9KeICXhYkwmxqsI8Oyr8ZS6MAtqlwqLteybaMNFg9N8awoLkYaA==","signatures":[{"sig":"MEUCIDdSK7eHWqYiwGXhtTehgTL4o7Q2KulZ+t+ZOPmWuJVkAiEAvGtgakt0eyaSdgK9ow5xIL1U+py8sTz+RB8ZT2v9dnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":580725},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousOf('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"c776dd22a4a4d88dfd95e2eaa13139a7687af44d","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.c776dd2.0_1708404210247_0.5926868115594437","host":"s3://npm-registry-packages"}},"1.0.1-canary.37874ee.0":{"name":"tonic-minijs","version":"1.0.1-canary.37874ee.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.37874ee.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"697b589b74cba79996f4be5efdf75571898e2d32","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.37874ee.0.tgz","fileCount":4,"integrity":"sha512-h14vaPSKeU1nbG1GDfCYUUwYvfi3EHY5Uv1U++c7Z+26mURHmWexWCiO1NqiTNnh83jl6FMPzlhD5ZMX93EGRQ==","signatures":[{"sig":"MEUCIAh8uslbWHIx+0lUlTCWE2X3gTsL1agw6fVPHdul0xvzAiEAuJWYE1e7PpN+7eZSp0U1PSTYW0eyMjOfnChbyfXTzjQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":580727},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to a JS variable which stays in sync when that variable changes.\n - Works with the following input types: text, textarea, select, datepicker.\n- `:class`\n - Set the class of any DOM element based on the value of a js variable.\n- `:text`\n - Set the text of any DOM element based on the value of a js variable.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"37874ee6b5a1294eebc22352774deeb84cad2d94","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.37874ee.0_1708404321577_0.03843637372672504","host":"s3://npm-registry-packages"}},"1.0.1-canary.2badc6f.0":{"name":"tonic-minijs","version":"1.0.1-canary.2badc6f.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.2badc6f.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"23574841ec1a6f4daf0126fca85f2ec2e86ff0cd","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.2badc6f.0.tgz","fileCount":4,"integrity":"sha512-iwBLdL2dAgTjl2gNV6mh2tRUXdjZQ9BRZH6zcTFk7gg5aAcUs3q/GVa7rpp2gyiuFwOoQlOg+Vv9V6LmeGhVjg==","signatures":[{"sig":"MEUCIQDME/b+v8zUk5wmNjYs9OWqAYMGZUMuiXmFh/RewWaABwIgXEqPjQ9nsvBUiczOjWg8btqvZkwAT5w8Dlq3P/PR6OM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":580634},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"2badc6f2a02b825b7fea51a65815f2a4d4c5db53","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.2badc6f.0_1708418066939_0.8002292086586844","host":"s3://npm-registry-packages"}},"1.0.1-canary.59ed8a4.0":{"name":"tonic-minijs","version":"1.0.1-canary.59ed8a4.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.59ed8a4.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"55dfab8cf90988ee32bedb64cf410adca042c42a","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.59ed8a4.0.tgz","fileCount":4,"integrity":"sha512-Jrv84bCGhSHrawiUMoKar1ux+2G1yoQvH0uhHk/v7wliVpTqUtZJP7e8b3KoBMl8Ljh81OCf2e7jlUjODpUnOw==","signatures":[{"sig":"MEUCIBeuEpobLt5jsdPPbowCz7vL5l1tPgFJFvqPhmqDb7m+AiEAnIpZKRMH7NhRqkAo79MxblRFxPqAKqTGpMnWTX1vYY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583038},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned:\n\n```html\n\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"59ed8a4cbdb76edf398cc10a7fb1f859aef273b4","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.59ed8a4.0_1708445199292_0.09227902077581662","host":"s3://npm-registry-packages"}},"1.0.1-canary.b00c6a7.0":{"name":"tonic-minijs","version":"1.0.1-canary.b00c6a7.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.b00c6a7.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"bacca39a6f651d8dc8994dc485bcae059c78e62e","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.b00c6a7.0.tgz","fileCount":4,"integrity":"sha512-jHEtcl9QGcVW77gOgzU0Mm2W0fnS31a0dlumJDTmenj6veZCumWJ+PgKRrDNK6V1D0omU4zZmisDZrjk7oAzKA==","signatures":[{"sig":"MEUCIB7Kt/npsNSjLe0yosZ4iiqRtLBsjMzwSGtPs9Wif4AhAiEAibMBGVZPSGop5dtzYnkOmXRJ1ZaeD6TAOzICWBmyhbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":583281},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"b00c6a713f2db0011679aadf9677d13f9cfa864d","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.b00c6a7.0_1708445307194_0.16173399972752334","host":"s3://npm-registry-packages"}},"1.0.1-canary.bfe3b36.0":{"name":"tonic-minijs","version":"1.0.1-canary.bfe3b36.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1-canary.bfe3b36.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"bb12e60e4791f834d68907dea64157067c6fac5f","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1-canary.bfe3b36.0.tgz","fileCount":4,"integrity":"sha512-wTBj5cn/sWRR+nDXh1QNgSV9HZ7zLrUZsg1zPFZIJcyygS6njI+hHuCriboVWbMKqD+wa5gkAbb3gahXb/mRcg==","signatures":[{"sig":"MEQCIFbu/Jg5oGKDl2BcUyE8H+bNNBhuMXbdA9UF6V3EIVHdAiAaPhEOxD4Zze9jtK/ZS0DpcuCStTaNui1Av4KZVJ6Chg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589616},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `npm install` to install dependencies.\n3. Run `npm run build` to create the `dist` folder -> output for MiniJS.\n4. Run `npm run dev` to run the demo page locally.\n5. Run `npm run build-watch` on another terminal to build the code whenever the Mini.js code changes.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"bfe3b36499226e32e12dfab28571e5b696e9948e","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"8.19.4","description":"## Installation","directories":{},"_nodeVersion":"16.20.2","dependencies":{"auto":"^9.35.1","vite":"^4.4.8","acorn":"^8.11.2","escodegen":"^2.1.0","acorn-walk":"^8.3.0","all-contributors-cli":"^6.14.2","@auto-it/all-contributors":"^9.35.1","@auto-it/first-time-contributor":"^9.35.1"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1-canary.bfe3b36.0_1708500118620_0.7026955576068972","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"tonic-minijs","version":"1.0.1","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.1","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"757ba7577bf3d6fd2d809d203cf267cfbcd9d0de","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.1.tgz","fileCount":4,"integrity":"sha512-o9x1a5dA887DJfmJw5JgUPy5S2VtH0RWq3AzG7RnDscvmtYX53+W3aGBDg7vJECR5GuefOEzZON24Z4oyALOtQ==","signatures":[{"sig":"MEYCIQCMtJFXbv2C4zNDp9vvYahS6nDquD1H/pMKpP/dBOpxuQIhAMUam26AFVfeHLBU/SkFJByoLwBinYZD/5OP1eio1ew4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":587240},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"0f04543426939553caf106f53cfaef41514a1ad7","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"## Installation","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.1_1708941898375_0.3399010866476435","host":"s3://npm-registry-packages"}},"1.0.2--canary.374701e.0":{"name":"tonic-minijs","version":"1.0.2--canary.374701e.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2--canary.374701e.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"2bb9368ab547ea89b5e8a568838f371264c607a0","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2--canary.374701e.0.tgz","fileCount":4,"integrity":"sha512-JpLR7aR6o6JHT9R4tuCvPIHm6q0/eMbigyIzt0KlfykzJjNGSiXLzLlNJIxor2MoaA5v4LBQ8IWvNFihCz5mCA==","signatures":[{"sig":"MEYCIQDvKx5huSXV9AXfv1fJvFyW47powIFxKTKq9ae651o0gwIhANJW0K2iuSW3R9UOq8HZKL1YHkfPc2r/uAe1JpM4PI08","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589206},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Parent Element Variables\n\nAdding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.\n\nA children's `parent.` variable is the same as the parent's `el.` variable.\n\n```html\n
\n \n\n \n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"374701ebd3742a87f19527717a35ecb242b89bb2","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"## Installation","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2--canary.374701e.0_1708948445934_0.27880523907323695","host":"s3://npm-registry-packages"}},"1.0.2--canary.f033eca.0":{"name":"tonic-minijs","version":"1.0.2--canary.f033eca.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2--canary.f033eca.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"36401747d6c9436a3c3367fefef5ad09d8eda470","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2--canary.f033eca.0.tgz","fileCount":4,"integrity":"sha512-rrVAVTNmD5dphhJNIcroYiDRJP+utF0egit3csK+1Tb42dRUbKoJnGuXItmawU82P5Kz8nEczJ6NQyIHfyAYyA==","signatures":[{"sig":"MEUCIQDQgpPS5QljmJKnlie7cRHboL7MVvctqv6PUkqpqw0biAIgTbgDj8H9lQ0k5iD71HsuGhA6Jq8cNWkoj8pITdmFIvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":596012},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Group Variables\n\nAdding a `:group` attribute to an element will allow you to access its variables from its children using `group.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the group variables in the `:group` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"f033eca8ca27ad2e5991e80f2d204d78036ee56b","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"## The Idea","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2--canary.f033eca.0_1709027228161_0.14210901842747625","host":"s3://npm-registry-packages"}},"1.0.2--canary.baa101f.0":{"name":"tonic-minijs","version":"1.0.2--canary.baa101f.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2--canary.baa101f.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"61079d060b1e41b4b6a78a203b4e009727cc20af","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2--canary.baa101f.0.tgz","fileCount":4,"integrity":"sha512-PtbqJQWAB6QlPuoh3M3BtJcL9OUb2XajJksXjU9IRUlrkBaEz0QN03l3twKXdx7si/zKr01rqD/wZTV2ccLaOQ==","signatures":[{"sig":"MEYCIQDBdGAyvlb4i1PTh6X7cOfxie7bimi8rqGZjTDenNpPVgIhAMLEOCkARV8pWoeoD+Ivj1MzIJ3shryxtVQuqiYIWEP6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590923},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Group Variables\n\nAdding a `:group` attribute to an element will allow you to access its variables from its children using `group.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the group variables in the `:group` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"baa101f4bc205e62c64301d06a26f602976cb850","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"## Installation","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2--canary.baa101f.0_1709027230312_0.9406854358106358","host":"s3://npm-registry-packages"}},"1.0.2--canary.20.ed27712.0":{"name":"tonic-minijs","version":"1.0.2--canary.20.ed27712.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2--canary.20.ed27712.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"cc945731c52296332ea70e6cce473df424230b4a","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2--canary.20.ed27712.0.tgz","fileCount":4,"integrity":"sha512-6jL/iiLKneu6BJMGUGKqzy8tlEMRYMOBGkJYXH1H2nInEor5hOQgE1erSOE6W3w0P6xd0rBeZQbP6/RHEUCtPg==","signatures":[{"sig":"MEYCIQCjBemnE/umMtFaVcUQ8CfDlrEk51DI70Snjlu4WR6ZBwIhAKfC6Q7ipMI/PlJPyEdlVReyetVTIpm1FXY/j42aRC8N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590926},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Group Variables\n\nAdding a `:group` attribute to an element will allow you to access its variables from its children using `group.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the group variables in the `:group` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"ed277120a2fd8866620bf47f4735cb970861d07a","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"## Installation","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2--canary.20.ed27712.0_1709040462840_0.25841678179339933","host":"s3://npm-registry-packages"}},"1.0.2--canary.20.a6adeed.0":{"name":"tonic-minijs","version":"1.0.2--canary.20.a6adeed.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2--canary.20.a6adeed.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"9ed1f595aa116875667f12d20d1820fbaf1933e9","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2--canary.20.a6adeed.0.tgz","fileCount":4,"integrity":"sha512-gbAd6ox4QTiDeiJWeEJ6efPYWk714IVybaUZNuKGlTTtpHv7h+SO5r2F4c+Js9SoSNADS9bo9dZr5jTyopOGAg==","signatures":[{"sig":"MEUCIC3NrGGRyJH4VWZ4V75SBTPFgvYyTPfbqIBruisIQMnGAiEAiBt1ealsrtcFF4kw39/ZNT1aBOTpWVsVpeWGsnEVRQc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590926},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Group Variables\n\nAdding a `:group` attribute to an element will allow you to access its variables from its children using `group.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the group variables in the `:group` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"a6adeeddb756c8fff74aedfa5268eaf6f8bef738","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"## Installation","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2--canary.20.a6adeed.0_1709041048697_0.16816083761988754","host":"s3://npm-registry-packages"}},"1.0.2--canary.21.bcb1765.0":{"name":"tonic-minijs","version":"1.0.2--canary.21.bcb1765.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2--canary.21.bcb1765.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"d08e1d7d7317629c9fe320edb4522238c60d1af7","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2--canary.21.bcb1765.0.tgz","fileCount":4,"integrity":"sha512-wYVCQkQSiM4GXZqOdmQDH6JbV4oOqfgLUZa4npxGKDum5B+BFQmcoIyDoD1r5g8GFuAzXxBDE52Yw0Ugf3ND8w==","signatures":[{"sig":"MEUCIQCyIDgHBa+ZRAHO0h0cq0EmnUATt95QY2oplrKzFYRc9gIgec/0m/QcXtnOQhkSeScNh8Q8lIQz/nk24Ye3X+ifZ2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":596023},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Group Variables\n\nAdding a `:group` attribute to an element will allow you to access its variables from its children using `group.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the group variables in the `:group` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"bcb1765e55f3646636ba7490f1503c989c317837","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"## The Idea","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2--canary.21.bcb1765.0_1709041126572_0.912548377434101","host":"s3://npm-registry-packages"}},"1.0.2--canary.21.3db67f4.0":{"name":"tonic-minijs","version":"1.0.2--canary.21.3db67f4.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2--canary.21.3db67f4.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"7938fca80752b67af15e2c3f0460c4e8fe1ac246","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2--canary.21.3db67f4.0.tgz","fileCount":4,"integrity":"sha512-oiOoHFpMZ/0+HL2sUqBgBbauZrQY22m3GIa4ort6Q/wWE77ipUy33uzg0qh7sm1zBT6kr4+2hQjTR2eZb1+uRw==","signatures":[{"sig":"MEUCIQCqrajdMZFatg/oagEIQb94i4CYuaiGs+5onDJGcZXd5AIgFkZXfMo9Ma23hPXOcPuIfnnjALPI/mOdxpr38BEhGno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":596023},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Group Variables\n\nAdding a `:group` attribute to an element will allow you to access its variables from its children using `group.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the group variables in the `:group` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"3db67f4aefc9ef46cda296a5c35e61c608b427e6","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"## The Idea","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2--canary.21.3db67f4.0_1709041539408_0.26006177352627513","host":"s3://npm-registry-packages"}},"1.0.2--canary.19.5a0dc37.0":{"name":"tonic-minijs","version":"1.0.2--canary.19.5a0dc37.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2--canary.19.5a0dc37.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"810a387f4c89ef114251435a6383969e06f8b048","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2--canary.19.5a0dc37.0.tgz","fileCount":4,"integrity":"sha512-kOnw+Zqtgw7yZ6f21S2HVKGp9YgSXDpkffu2QIeHjAbcLPT293g8cENg41W73X9Wf3SirrBBxTQMg/bau+r6TQ==","signatures":[{"sig":"MEYCIQDX8uIFhxcMlxEVbW6hOz8xnU8D+3LJHIdmFVlGP99WrgIhAJM/KWDG33dBYOd+iGcmTOWkPWJ4sOuHGuD93J7N8jm2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":596159},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Group Variables\n\nAdding a `:group` attribute to an element will allow you to access its variables from its children using `group.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the group variables in the `:group` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"5a0dc37bc84a7c7bf197a5512d42a015af5c922c","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2--canary.19.5a0dc37.0_1709042182565_0.5436851420246345","host":"s3://npm-registry-packages"}},"1.0.2--canary.19.98dd0c8.0":{"name":"tonic-minijs","version":"1.0.2--canary.19.98dd0c8.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2--canary.19.98dd0c8.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"a237f556178db42ca4d517cf84d4655c0900b97a","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2--canary.19.98dd0c8.0.tgz","fileCount":4,"integrity":"sha512-ryGi5gs+skfvqkOFerVjbp9vcXSgevkEC+4rlV4Sfgn+ZVOwViw46zMcd3GETyJMgNugLxbNY+/wzaosEkgAGg==","signatures":[{"sig":"MEUCIQCrbX9rkhEua46331v4RqotHN3NH9KNEKKBZ7wNwITAewIgCbTVrWnPKw9QrJOE9yzgegdUUDHAZcdWfjuSqcURhMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":596159},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Group Variables\n\nAdding a `:group` attribute to an element will allow you to access its variables from its children using `group.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the group variables in the `:group` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"98dd0c86ac107283c2bf67addb2ae3cf3fd2b2df","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2--canary.19.98dd0c8.0_1709042336990_0.561606583561387","host":"s3://npm-registry-packages"}},"1.0.2--canary.19.c651a29.0":{"name":"tonic-minijs","version":"1.0.2--canary.19.c651a29.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2--canary.19.c651a29.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"4e83fddf099473edd0493568c1f90eb0eb754e66","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2--canary.19.c651a29.0.tgz","fileCount":4,"integrity":"sha512-uWRMivoR3MlBKc5+7NefyCmgVTDC69as4bO2fL5Q+pAReJEYocIBDJLBiUXyvmS3D4HNLjRBpVIJImCuwKfcMg==","signatures":[{"sig":"MEUCIQDHWlcqEmNu+K5Of9Lq+x84pf6XkJpMLU+FmJ/S9M3bpgIgd0F1ph/q9RyTXbPRaXPguW/RlEj/dF2trpYtbE1YmNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":596047},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Group Variables\n\nAdding a `:group` attribute to an element will allow you to access its variables from its children using `group.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the group variables in the `:group` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"c651a2961c0d387d2f7dda8bc06a560ff2b7d451","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2--canary.19.c651a29.0_1709043091234_0.5791123928684414","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"tonic-minijs","version":"1.0.2","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.2","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"7afe92dff8419a604e5508882612639e4fa7bdb9","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.2.tgz","fileCount":4,"integrity":"sha512-Y45hVzxTbIPX0yHgMIXyTd/+/sSaNvhzXufZ8nxhPBbfjG/JAdm5VthEz6lUZReBlZI3wy3ZXzn04rNjnKD1SA==","signatures":[{"sig":"MEQCIAsDiG3/g4KPL7W5DtUacCGf4IjT/T6dGJRQHyQNHHXDAiBe9WVooB06/U5L7NAUpfbIRWjOpq3TZaZ9htgXa2m2+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":596026},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"8e04852dc80b5b55246a8d837bfd1c7916ec6585","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.2_1709043361016_0.2743830006572232","host":"s3://npm-registry-packages"}},"1.0.3--canary.19.2522612.0":{"name":"tonic-minijs","version":"1.0.3--canary.19.2522612.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.3--canary.19.2522612.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"2ae447ad240326272934fae006050444be0756c0","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.3--canary.19.2522612.0.tgz","fileCount":4,"integrity":"sha512-m9TElh7fEJQqUTHXXIhr20jrZv0xat3XzAYASrRF1S5Qg6B0q6USdWSJbY+oHO+YWEhdYKoaYZZNg6lWYKqDHw==","signatures":[{"sig":"MEYCIQD2smuIpHEgtCyOFRVjDW9B4pghSRFk10XUEu79Psl4qgIhAOO9HahGAaVP6DzaWP8XRlaEhapBej2clXCyipC7z/hg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":596047},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Group Variables\n\nAdding a `:group` attribute to an element will allow you to access its variables from its children using `group.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the group variables in the `:group` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"25226120a51ff694e428caaf59787911bb2d579f","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.3--canary.19.2522612.0_1709043404362_0.22197921146741417","host":"s3://npm-registry-packages"}},"1.0.3--canary.0ced10f.0":{"name":"tonic-minijs","version":"1.0.3--canary.0ced10f.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.3--canary.0ced10f.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"bb00cab57b8db8c2226169c1d54a2fea00e61cf0","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.3--canary.0ced10f.0.tgz","fileCount":4,"integrity":"sha512-5vdaPrDZEeL3pXgWBjvh0GWMjHsg2k1vGr/UL7r1cPHR4z5ioucuJbEQlb88R+Z4k0pe+Dk3xVfvoQNNIUbjAQ==","signatures":[{"sig":"MEYCIQCdNclezQN5WcQmZX1Ss2x9otLCoHawYWeK7189JnGrTAIhALScK0n8oD5VcG0YsPuPj7vIrkpOkRSgRQq/O8TaZAz6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":596044},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Group Variables\n\nAdding a `:group` attribute to an element will allow you to access its variables from its children using `group.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the group variables in the `:group` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"0ced10f967639acff7a26ca954bc3f3388a96a0f","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.3--canary.0ced10f.0_1709045070101_0.3248809266063144","host":"s3://npm-registry-packages"}},"1.0.3--canary.22.13ca8a3.0":{"name":"tonic-minijs","version":"1.0.3--canary.22.13ca8a3.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.3--canary.22.13ca8a3.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"2f846f2ca66c3a83828fb4d009b75587d9cec03f","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.3--canary.22.13ca8a3.0.tgz","fileCount":4,"integrity":"sha512-U5FR37xWs+Pa54bMPqDIkiac2W5/r4cRmN4VSbYBNChGZFPcj6WKjzOIG7PL9UXjRgCTQyPoEw67sfhe6OpRPg==","signatures":[{"sig":"MEUCIQDzEMiWifwlSLXBIHKhnpYeL+kWr556YN0Yp6m68Z6f8QIgLuPMdYst7CG/hMFOnS7cVHhBfhFRmK88pyO9GjeooO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":596047},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).\n\nRead the [documentation](https://jorenrui.notion.site/Mini-js-7a51523e0a5845c782097782f49a5bae?pvs=74)\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-nested objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following attributes that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in dynamic events.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also use the make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nSpecial variables are available in events:\n\n- `event` - the event object\n- `this` - the current element\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Scope Variables\n\nAdding a `:scope` attribute to an element will allow you to access its variables from its children using `scope.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the scope variables in the `:scope` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns an array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `add` - adds an item to the array if it doesn't exist.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `remove` - removes an item from the array if it exists.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the array\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n#### Triggering Array Updates\n\nTo trigger a re-render you need to update the variable:\n\n```js\n// Will not trigger a re-render\nfilteredTags.remove('Chocolates')\n\n// Will trigger a re-render due to re-assignment of the\n// filteredTags variable.\nfilteredTags = filteredTags.remove('Chocolates')\n```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"13ca8a3eda0ebc137b50521d3ee30f2c649f25cd","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.3--canary.22.13ca8a3.0_1709185139295_0.37864826320801703","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"tonic-minijs","version":"1.0.3","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.3","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"ee325231c9ebfee6340cf750a1ee862e8441cf4d","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.3.tgz","fileCount":4,"integrity":"sha512-eENNDPYIdzgDSjN0FNK/1io87PEHuevV7mw5F6tP4w9FM6Lic5j5vTQWN4crte7er4bgh5sRPSN8WRE0f7rKFA==","signatures":[{"sig":"MEQCIBIVrij+ETnt/vlCpeE6sWTuIiKZMibfALl0htBhcErGAiBiJgdfxECrOwfOKw+3SBC7p7asCVWGPqzzsfkLUFdhRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":596026},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"979b2867da0b674843270a6f7226bc2601702e78","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.3_1709188750845_0.37123521419639105","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"tonic-minijs","version":"1.0.4","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.4","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"76892d8ffcd5f765424bcaf1d718b806dc98c485","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.4.tgz","fileCount":4,"integrity":"sha512-nvYsspzI1Bjmb6JeqO+Xh/9T2AwSQhZCGMjdaKTQjOVFoCTyoSFI9r5qSGP00ysLsfEKSgS2kdcUbsa2V4CDZg==","signatures":[{"sig":"MEUCIEKovsQeE/AR3banKaXDZQ4jUT6Zk+Lpb+6xFqGT8ISFAiEA8/VbsgzlVMwhnwHPYjb99t19ED0gKi1iHNNv9CD4ddE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":596911},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"c9b13246bc6c588707646192f420ec78acc613b1","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.4_1709894549363_0.5403819861675776","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"tonic-minijs","version":"1.0.5","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.5","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"99b2d17d4f3e42eaca9b9a07f3fa54f08ece1a44","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.5.tgz","fileCount":4,"integrity":"sha512-8XcPbbczcLqCuIODVsLWgBvg/wKnq0PXV5amye+rQFOGRjByiMZRs82oFD7NKxNirYH0BGjKmaHcVoa+y7kKVw==","signatures":[{"sig":"MEQCIE9mJ9ggDU6vuvgetaDvEN9YFf6OAXiaYTlhSJmy266RAiBkF41urgDQfiY7tq481i0yS4pJHk+equdA3v+56yj8JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":597152},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"45bcf27de23078f57c607cfad583787c6e68875b","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.5_1709895939040_0.45810024353442014","host":"s3://npm-registry-packages"}},"1.0.6":{"name":"tonic-minijs","version":"1.0.6","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.6","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"6b884cc106f05f4e51f7b7d0e04e1f87975271b9","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.6.tgz","fileCount":4,"integrity":"sha512-u8Da6PQpTEtHR9aiy4lfEJe7y9qnDqnNFl6gHtfPds4voxvge11yivyT9JMIGZzXIZXBj/7yTxswUvTX5w78fQ==","signatures":[{"sig":"MEUCIAo6L0n83mDUAskDf5hUbqct1gWSbFwoueJA+JCaMwUxAiEA2YzK9m92AkQV1yLGJ9urRev0qnV89C9FavhsiHp4nQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":597654},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"6ab1fe71fa48c09773397adca5e275048214e479","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.6_1710659779943_0.6165809266863833","host":"s3://npm-registry-packages"}},"1.0.7":{"name":"tonic-minijs","version":"1.0.7","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.7","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"a7829486fedf3765af447a4343339b91ab23dcfa","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.7.tgz","fileCount":4,"integrity":"sha512-Kp59FiNfpG0nFDaqCXFeKdudwRVFwFzPlCrNvuXunTrQDNsVeqs4tZ7P/9d0/UdsSYlws2vif7fJ+3wLoZ2P7A==","signatures":[{"sig":"MEUCIQC/SdYGegqKGnqT2KqFfWdL0tIMy0MyWCKqsihJr29QbAIgfWdMrlzgXljG0juAZq1DGyV9awLtAys4483sUyojfh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":597558},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"f7ef980489438d1f5406ce5a985d64111037246e","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.7_1710680424662_0.15173975858916045","host":"s3://npm-registry-packages"}},"1.0.8":{"name":"tonic-minijs","version":"1.0.8","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.8","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"aebbe3e804e74353c0475d0c371bd75b0686b06e","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.8.tgz","fileCount":4,"integrity":"sha512-DbQ+7m5DBdfIfbCg4c+tLN2+htr489ZESDBUHjesW1jRF5k1ftaVKlTGuoS2zm0eTIGi484IXkPyRGzyQ3RyZw==","signatures":[{"sig":"MEYCIQDRU4QXTOLzXygKRA9tgmAKphgOHsUunopYEpWUvx33HAIhAJOnhhCI7/V+TcHMbZAu2ZpAuXc+Ic4jKq/M/af7Q0K7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":598488},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"6250795361f47c7da2ddfdda741f994c96f140be","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.8_1710933419653_0.07341206691382895","host":"s3://npm-registry-packages"}},"1.0.9":{"name":"tonic-minijs","version":"1.0.9","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.9","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"c86cc9964de383b6bfc0437583c7a9f432963bdf","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.9.tgz","fileCount":4,"integrity":"sha512-XV0cMbAwzlCR7tYT+dXOeKqhTKqyqlI3qSqqTiRt5OcZJuXXFqDN70YVeNPGSl7rU4G0mON6CSUi3WKDQcj35Q==","signatures":[{"sig":"MEUCIQDXCWPAMGj62nyZ4aypHYoBNqrVTAj2sfketbecJ701aAIgLzNJcZKtOSC60npA9evXnwxwZzeB6cFk6zF7xBFFHhg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":600353},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"545a4659a829de33606ecc20a5a2e3b19bc0bf19","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.9_1711183434205_0.31825337782971963","host":"s3://npm-registry-packages"}},"1.0.10":{"name":"tonic-minijs","version":"1.0.10","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.10","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"0aef4b50d737d79f0cf531c3440f9d5021be1ae0","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.10.tgz","fileCount":4,"integrity":"sha512-/x7rhLfjzsUHcIUbR2AMWyE5YpnLelF2Z2NJbW1wxOR+qSV818oLQRcZDvtgBn+E9wJHkvDBlwmHjZhv771W6A==","signatures":[{"sig":"MEUCIHrqtN0RmKsr6QRLvcWXkjiHimTiTNFylKhtPqB4KCp7AiEAhdxHHRacKvslQyn9qDDb3bBm9jogLKWQpNTPcJXrMlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":600684},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"98c94f17777580c62a0c50833c1e643fba1df07c","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.10_1711263603051_0.9383428811286394","host":"s3://npm-registry-packages"}},"1.0.11":{"name":"tonic-minijs","version":"1.0.11","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.11","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"083c56071088a6e5df2aac3381f9ce750d06a517","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.11.tgz","fileCount":4,"integrity":"sha512-tHvJ3UIM0C2mWXSbyjFabVqYsLwFcjfzc0cDnBVG6hotGcC2T29ykcBWv1yP1fXHshm/Nzejnx3RF6hfhnDArA==","signatures":[{"sig":"MEQCIGoZIsPl1i6rGx3GUg8ADZeoNVkiqIXVpjDhKo0ShYIAAiAH5v3qAsjdRaxF/S7oIVl70Up864hxOKaUGtNAcHgQWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":601493},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"d3b2c7fae81f1f8d51bc4e8b34ba3fc38fd4520d","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.11_1711267475596_0.9625031946420914","host":"s3://npm-registry-packages"}},"1.0.12":{"name":"tonic-minijs","version":"1.0.12","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.12","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"380252384ceaaa3a74e74c641a34e96efa6f592c","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.12.tgz","fileCount":4,"integrity":"sha512-P4y6WYlWpUZx2FRapVTGl1cMMf7M40HrnXvCX4LOjtiKxVWT3vZvZNRSgZHC3JH+zFqd/RkEOS7/geWM7I0QCw==","signatures":[{"sig":"MEQCIH5RlDyQuTi/oy6pWNADUW2jriUNUz6pfa1wk4/wAI8DAiBECvXz1VuODQanENR3gkfb+Cj7f57qd76hggw6N0UuGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":602376},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"b50bb7afe5d828856c5f26646d7e6ce253fd5b85","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.12_1711365558532_0.3091650193971194","host":"s3://npm-registry-packages"}},"1.0.13":{"name":"tonic-minijs","version":"1.0.13","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.13","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"1c63cf2a5ca7859c83acee3f27a5b8ceedc542c1","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.13.tgz","fileCount":4,"integrity":"sha512-1nv/bdTcA/2ZCZRMBPjhmkEbwbs/dzrtlZZrgIsyif/XP/y68rPIhXrS/Y9mw1KBabxeyR9oTGHDx6U4QGe0tQ==","signatures":[{"sig":"MEUCIFIOPpF3YRk3OYXQSZid1pbGeMbRPRKHL6XNYpPjp5smAiEA1yJIfyMqdgS50Hvc1h4fhpMBXLwF6tw5CjBUnEYttPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":602166},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"673f632e4c7c2aa7cb1600caece973f7a2d1e758","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.13_1711369156096_0.14655298100159508","host":"s3://npm-registry-packages"}},"1.0.14":{"name":"tonic-minijs","version":"1.0.14","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.14","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"10ad9d64c67b4cc9a909d2c76c1fca1f118d0f1c","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.14.tgz","fileCount":4,"integrity":"sha512-rHj2IvNZk7ARhfaJAAPGyFpy8os7zEqJphUPJlfKy3DUWw10wMRMXjOc2JKevBbop4WEbRMYjhW+2PAEeTh83A==","signatures":[{"sig":"MEYCIQCFdk+ZAsVoQGKX6RxrYmOFUarMVUepo/9S6pIySZgKlgIhANT0dk2bSIvEfDq6yXhOBqlgriJtmi2YsKaRoqsQ1D1X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":602294},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"ea546e1b0811edc24d71eca4ed682722e5c603cd","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.14_1711370558526_0.38799938182166005","host":"s3://npm-registry-packages"}},"1.0.15--canary.30e7bd3.0":{"name":"tonic-minijs","version":"1.0.15--canary.30e7bd3.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.15--canary.30e7bd3.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"daab6d2c00dd8b11f36e7d2fe8cf1dd8a8e01445","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.15--canary.30e7bd3.0.tgz","fileCount":4,"integrity":"sha512-hm4axE/GJUaqV3lFBzJXtrrstQu9L6/MkNlNzrVYC5Q/R0e8YS7N6wEJkq5zyM/dbDLOv7AJ3UQVlT4D6+bv6g==","signatures":[{"sig":"MEUCIBsBmtpKaz0CmeUj5Y54K3hkSERUccnYCusTJFDwUBu1AiEA5lcD38fdd+SC5NBRwosAQWkL0aFN8GlOuzdWSxmtce4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":602312},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have\n 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and\n 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do.\n- Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following **dynamic attributes** that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in **dynamic events**.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n### Special Variables\n\nThere are special variables that you can use inside dynamic attributes and events:\n\n- `this` - the current element\n- `$` - equal to the `document.querySelector`.\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nIn events, you can get the current event using the `event` variable:\n\n```html\n\n```\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\nNote: Each item variables are **read-only**, which means you can't re-assign them like:\n\n```html\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Scope Variables\n\nAdding a `:scope` attribute to an element will allow you to access its variables from its children using `scope.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the scope variables in the `:scope` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns a new array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n- `add` - adds an item to the original array if it doesn't exist.\n - This mutates the original array.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the original array if it exists.\n - This mutates the original array.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the original array\n - This mutates the original array.\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n - This mutates the original array.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n\n\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"30e7bd39e8f56453a22b81be8581d899fb1aa425","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.2.4","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.15--canary.30e7bd3.0_1711548444593_0.48672372121272134","host":"s3://npm-registry-packages"}},"1.0.15":{"name":"tonic-minijs","version":"1.0.15","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.15","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"f29921cec20bdedadf8823562427d56a9b0af8c4","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.15.tgz","fileCount":4,"integrity":"sha512-tDK96DXSqEaFIc1C6EsQrungRBc0MZWqY0XumMI5M0kCyJbzjydxJJpTcqngopeTl2S04kiXOTi/XJPCEmaCSA==","signatures":[{"sig":"MEQCIAxzEtvLwlO5yMr0W8eJ5k6QRWWJ3t5ARR2JKHvRVsFyAiBIF+M+7hjldmpYQCnjWfFlvaJ9ZdT5UifdUBt+dk3YZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":602552},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"e4d85954c901c4cb9cda9ea879a820cc52c0d2ab","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.5.0","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.12.1","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.15_1712984641218_0.3534897929810181","host":"s3://npm-registry-packages"}},"1.0.16--canary.17af79a.0":{"name":"tonic-minijs","version":"1.0.16--canary.17af79a.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.16--canary.17af79a.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"945fa6aa1b2e01f427d33b047106fd4154941582","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.16--canary.17af79a.0.tgz","fileCount":4,"integrity":"sha512-2rb48hTD1Set3hco8Zzs6RcLahutlyfJnM17yGT3l84/8mRbQwzEjcAqABYOm+sjSA32639isHiOCeuYOQrgxw==","signatures":[{"sig":"MEUCIBDIDR0YiXB3wKe1AZMNjC1YjW+jyvML1ADHECT9K2DxAiEAo26Zuai8J1Ihz0+HfYHYfWxC2DRXVfoPOb8M++8JBD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":602714},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have\n 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and\n 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do.\n- Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following **dynamic attributes** that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in **dynamic events**.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n### Special Variables\n\nThere are special variables that you can use inside dynamic attributes and events:\n\n- `this` - the current element\n- `$` - equal to the `document.querySelector`.\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nIn events, you can get the current event using the `event` variable:\n\n```html\n\n```\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\nNote: Each item variables are **read-only**, which means you can't re-assign them like:\n\n```html\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Scope Variables\n\nAdding a `:scope` attribute to an element will allow you to access its variables from its children using `scope.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the scope variables in the `:scope` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns a new array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n- `add` - adds an item to the original array if it doesn't exist.\n - This mutates the original array.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the original array if it exists.\n - This mutates the original array.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the original array\n - This mutates the original array.\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n - This mutates the original array.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n\n\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"17af79a770555f3a590b0880be146579bf7fc6b1","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.5.0","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.12.2","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.16--canary.17af79a.0_1714749706581_0.21438896745477853","host":"s3://npm-registry-packages"}},"1.0.16--canary.25.41c5756.0":{"name":"tonic-minijs","version":"1.0.16--canary.25.41c5756.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.16--canary.25.41c5756.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"d682f1ae667a4b22e5b27ff89e9d3e93f3e30c67","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.16--canary.25.41c5756.0.tgz","fileCount":4,"integrity":"sha512-mULdLP8Vr6uJQ8mGxn9hh6cZssS14GCIe+jX32pTY7BeHpO3TEwb3Ms0/Ub+JYFfEuot0Ox+YC4xKYVV0KYktQ==","signatures":[{"sig":"MEUCIQDIndOfeX2Sm3YSZV/XqkbU09T+zTQd+jWmvjmFkFDcawIgFd/7FJmX0o3clH5WsAsjvCIxfaSzNQYtThRjssa2gKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":603909},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have\n 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and\n 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do.\n- Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following **dynamic attributes** that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in **dynamic events**.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n### Special Variables\n\nThere are special variables that you can use inside dynamic attributes and events:\n\n- `this` - the current element\n- `$` - equal to the `document.querySelector`.\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nIn events, you can get the current event using the `event` variable:\n\n```html\n\n```\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\nNote: Each item variables are **read-only**, which means you can't re-assign them like:\n\n```html\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Scope Variables\n\nAdding a `:scope` attribute to an element will allow you to access its variables from its children using `scope.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the scope variables in the `:scope` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns a new array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n- `add` - adds an item to the original array if it doesn't exist.\n - This mutates the original array.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the original array if it exists.\n - This mutates the original array.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the original array\n - This mutates the original array.\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n - This mutates the original array.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n\n\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"41c57560892b4aafffcb62a7e2666485dcf752aa","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.7.0","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.16--canary.25.41c5756.0_1717854098761_0.05267869307631701","host":"s3://npm-registry-packages"}},"1.0.16--canary.25.0ead842.0":{"name":"tonic-minijs","version":"1.0.16--canary.25.0ead842.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.16--canary.25.0ead842.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"21434268b867a9282cb97e601f786ffe7f80229e","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.16--canary.25.0ead842.0.tgz","fileCount":4,"integrity":"sha512-W7Upzqlo4ithqLr9vAQqE0ncguhMDqqjNHxG8o4Jf/jl7n943pgxyCPv0eaxhHuqtbIagv21sRwPFvaEps+2BA==","signatures":[{"sig":"MEQCIFdCaPmyzzjeaYMDPdhrD3jZiOTXVgH+clcRMcKD6miIAiApxMluYTFl2SypIjBzeyxoUhBIXk0m+8aDxEUGKXBoNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":604149},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have\n 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and\n 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do.\n- Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following **dynamic attributes** that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in **dynamic events**.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n### Special Variables\n\nThere are special variables that you can use inside dynamic attributes and events:\n\n- `this` - the current element\n- `$` - equal to the `document.querySelector`.\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nIn events, you can get the current event using the `event` variable:\n\n```html\n\n```\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\nNote: Each item variables are **read-only**, which means you can't re-assign them like:\n\n```html\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Scope Variables\n\nAdding a `:scope` attribute to an element will allow you to access its variables from its children using `scope.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the scope variables in the `:scope` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns a new array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n- `add` - adds an item to the original array if it doesn't exist.\n - This mutates the original array.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the original array if it exists.\n - This mutates the original array.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the original array\n - This mutates the original array.\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n - This mutates the original array.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n\n\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"0ead842b68e63e4cbc397dd6b678802771520909","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.7.0","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.16--canary.25.0ead842.0_1717854688254_0.8977483165592062","host":"s3://npm-registry-packages"}},"1.0.16--canary.25.e930d41.0":{"name":"tonic-minijs","version":"1.0.16--canary.25.e930d41.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.16--canary.25.e930d41.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"54e8a831d6681bf6b46c911e5dfce674a242436e","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.16--canary.25.e930d41.0.tgz","fileCount":4,"integrity":"sha512-82dQ2eEcju36WT2H0fH7rxxNTdTz+8X0r3iNWtSr3Jdxc+Zxk3v5NoBKQGKxA/qHw0WJTx/jNX0uxCaxwlc6Fg==","signatures":[{"sig":"MEQCIHj3cHSCXR8R9UYy12V0uEQwg6ZUNX+93ZxmecsmjdNJAiBS3acnpF9bAv9CpvEPlZctS+WVdThm8P1VNLk0NkiUfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":604058},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have\n 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and\n 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do.\n- Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following **dynamic attributes** that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in **dynamic events**.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n### Special Variables\n\nThere are special variables that you can use inside dynamic attributes and events:\n\n- `this` - the current element\n- `$` - equal to the `document.querySelector`.\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nIn events, you can get the current event using the `event` variable:\n\n```html\n\n```\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\nNote: Each item variables are **read-only**, which means you can't re-assign them like:\n\n```html\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Scope Variables\n\nAdding a `:scope` attribute to an element will allow you to access its variables from its children using `scope.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the scope variables in the `:scope` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns a new array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n- `add` - adds an item to the original array if it doesn't exist.\n - This mutates the original array.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the original array if it exists.\n - This mutates the original array.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the original array\n - This mutates the original array.\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n - This mutates the original array.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n\n\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"e930d41697c4daac2c2b2d7fde0f4a55da7a4f4c","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.7.0","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.16--canary.25.e930d41.0_1717920996377_0.02864859343629922","host":"s3://npm-registry-packages"}},"1.0.16--canary.25.faaaa70.0":{"name":"tonic-minijs","version":"1.0.16--canary.25.faaaa70.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.16--canary.25.faaaa70.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"7347714b0ca21e7fe643c5a2a5cfe6b45a6c8438","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.16--canary.25.faaaa70.0.tgz","fileCount":4,"integrity":"sha512-MGUvUohKnFQSlna0+o9JPknp3+jwNn5IXYdU6O+neBq4vPlGaGEFeMAq7IQ3besaM/pHdEEiDEtER5YPnus3UA==","signatures":[{"sig":"MEQCICeieZnNy3iFjsntgAinm8N5D4IERp8jhG4EM44o6q5wAiA8ylQ4vlhIpLMFsgruUy2w+HxbhaLaFDy0wuw3BqvLgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":604026},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have\n 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and\n 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do.\n- Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following **dynamic attributes** that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in **dynamic events**.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n### Special Variables\n\nThere are special variables that you can use inside dynamic attributes and events:\n\n- `this` - the current element\n- `$` - equal to the `document.querySelector`.\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nIn events, you can get the current event using the `event` variable:\n\n```html\n\n```\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\nNote: Each item variables are **read-only**, which means you can't re-assign them like:\n\n```html\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Scope Variables\n\nAdding a `:scope` attribute to an element will allow you to access its variables from its children using `scope.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the scope variables in the `:scope` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns a new array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n- `add` - adds an item to the original array if it doesn't exist.\n - This mutates the original array.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the original array if it exists.\n - This mutates the original array.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the original array\n - This mutates the original array.\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n - This mutates the original array.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n\n\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"faaaa70ca8e70265ab80d20a265c40f75e870696","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.7.0","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.16--canary.25.faaaa70.0_1717921067320_0.542189933178082","host":"s3://npm-registry-packages"}},"1.0.16--canary.25.b264c14.0":{"name":"tonic-minijs","version":"1.0.16--canary.25.b264c14.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.16--canary.25.b264c14.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"62775a9a0dc1b7afae8f05f2b0340683c6c92882","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.16--canary.25.b264c14.0.tgz","fileCount":4,"integrity":"sha512-TR+Ru9+JeyzpLyDwN63MjyeRmRpuXNqqM2mAPCiyEJVEu79hekwNnIOThC1mPC9rcoQ9N56WK25tT5+ZErnOtA==","signatures":[{"sig":"MEUCIBCmDQIakp4diHGzhbow1KRN5JtPCAhejNl2OB1knmpHAiEA+a8YihbK1NQnKoW9R0LFusu6hrrRWb/Ss9QHQR7BhPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":604305},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have\n 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and\n 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do.\n- Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following **dynamic attributes** that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in **dynamic events**.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n### Special Variables\n\nThere are special variables that you can use inside dynamic attributes and events:\n\n- `this` - the current element\n- `$` - equal to the `document.querySelector`.\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nIn events, you can get the current event using the `event` variable:\n\n```html\n\n```\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\nNote: Each item variables are **read-only**, which means you can't re-assign them like:\n\n```html\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Scope Variables\n\nAdding a `:scope` attribute to an element will allow you to access its variables from its children using `scope.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the scope variables in the `:scope` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns a new array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n- `add` - adds an item to the original array if it doesn't exist.\n - This mutates the original array.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the original array if it exists.\n - This mutates the original array.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the original array\n - This mutates the original array.\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n - This mutates the original array.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n\n\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"b264c14bc299181b9d77846cace77d1f0e1d178c","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.7.0","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.16--canary.25.b264c14.0_1717922493206_0.9617633278094455","host":"s3://npm-registry-packages"}},"1.0.16--canary.25.7b00afb.0":{"name":"tonic-minijs","version":"1.0.16--canary.25.7b00afb.0","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.16--canary.25.7b00afb.0","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"6d8fd6211721e40e054b8009c1d5a32a3b215888","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.16--canary.25.7b00afb.0.tgz","fileCount":4,"integrity":"sha512-sq3fL/gg1yR86c7sbjLKD+QLNJ2D8CzTBafL9cDRyh+m+fYMV0mBBv73PLewkQfksorZGC98e8B9PdPFsxG+0g==","signatures":[{"sig":"MEUCIHk7sq2KaJhQuKrF/mOfmiVTgK6ngvkvJ5749fFrFo3dAiEApQ0x3QWnaFLv3L7fb6aUZTn7l0wnl5j1zFEdftwsLMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":607300},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have\n 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and\n 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do.\n- Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following **dynamic attributes** that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in **dynamic events**.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n### Special Variables\n\nThere are special variables that you can use inside dynamic attributes and events:\n\n- `this` - the current element\n- `$` - equal to the `document.querySelector`.\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nIn events, you can get the current event using the `event` variable:\n\n```html\n\n```\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\nNote: Each item variables are **read-only**, which means you can't re-assign them like:\n\n```html\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Scope Variables\n\nAdding a `:scope` attribute to an element will allow you to access its variables from its children using `scope.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the scope variables in the `:scope` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns a new array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n- `add` - adds an item to the original array if it doesn't exist.\n - This mutates the original array.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the original array if it exists.\n - This mutates the original array.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the original array\n - This mutates the original array.\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n - This mutates the original array.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️
\n\n\n\n\n\n\n\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"7b00afb229ddfdc7b903b9afe7f3073190144941","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.7.0","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.16--canary.25.7b00afb.0_1718444745928_0.7644222704642996","host":"s3://npm-registry-packages"}},"1.0.16":{"name":"tonic-minijs","version":"1.0.16","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.16","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"6c44959196ffac217b1bd62d91b5ca64b945ca7e","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.16.tgz","fileCount":4,"integrity":"sha512-Ax3tGUxRq74yfQ0Zoddn4bWOWgpAN3Bfk9Aq+A6SvzCAUOA79j9s2obEefMi13W3JwrACSpv38FET8t1191vSQ==","signatures":[{"sig":"MEQCICtJdToSjg7hNjCOXcDXERS9jDYwTrNM7TACstQaF1DwAiAvn/ySC1f4PLofc/MptyMk8WwJrM+AA8IcQ+Mecddwxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":605538},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"82074906d479e8bfe12c97f33933b3608c36343d","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.7.0","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.16_1718692141913_0.890131944427242","host":"s3://npm-registry-packages"}},"1.0.17":{"name":"tonic-minijs","version":"1.0.17","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.17","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"c82890c3b58f346ddb593510ec0e03c64f2c7d20","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.17.tgz","fileCount":4,"integrity":"sha512-klUQeHZDtqOsyAiXJc88RnWymdHwnIKs+x6fVaQjdeN8BpxlER1bj0sO2VLagkfiGSVHIyuQ934Y4OB4jLUyPg==","signatures":[{"sig":"MEYCIQD2Zw55Mam1XW6fAQfo6OymXpu0w2BmyPBDX/1xvCDAawIhALNbHHTd06G0zZkevhmsp7yhxVlrJ6moEZtAbtDYcwo+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":605923},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"86f396708005f3a1ce6526d5a4872eb1f7fee371","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.7.0","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.17_1718725004759_0.1316795624073881","host":"s3://npm-registry-packages"}},"1.0.18":{"name":"tonic-minijs","version":"1.0.18","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.18","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"d56abeee992177a5ddbc9313a61d2c5b1bda7651","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.18.tgz","fileCount":4,"integrity":"sha512-QTlGpseFlLXq834hONyO1Y9HFtfupSK5cu3jhLfXpyvXNmxKoygvwzPyonWgcQM4hiCPJWNJ29qhz51SJKOouQ==","signatures":[{"sig":"MEYCIQDrZhsE93kClymeHROD43cU21Qi7TGXqSjZFPzpnhrAIwIhAP/gmJmiwhUv5c64KlaUCaMbMaMJBc6477H5zrBy/Vrd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":606219},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"4e70f0cb0dd5a1c4b60a8904d700747f1fc33014","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.7.0","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.18_1718775688149_0.06061189138441958","host":"s3://npm-registry-packages"}},"1.0.19":{"name":"tonic-minijs","version":"1.0.19","author":{"name":"Jen Villaganas"},"license":"MIT","_id":"tonic-minijs@1.0.19","maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"dist":{"shasum":"f340280c2ebd620a855a3108dc6a97a4a00566ac","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.19.tgz","fileCount":4,"integrity":"sha512-z9iKAj/8tc8fWVGZMTAf7hdxo3koLTISRf+qtvZuxIapKj0Pp1vV/NJlukNRD2h4Hl+67w4+3l9ySbpWDqA/zg==","signatures":[{"sig":"MEYCIQCgnwgdOufR3XWW2B7x9BSFqvDLjJZs9NcGo/lhdhBhCAIhAMFUV+Lfsh51590Dv7kd64zItv9Xq3ZPriHSBfyVT4gp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":607044},"main":"./dist/mini.umd.js","module":"./dist/mini.es.js","exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"gitHead":"9ff9dfdbeedf2d3db6a1ee3706bdc74c116c7bb2","scripts":{"dev":"vite","test":"vitest","build":"vite build","preview":"vite preview","build-watch":"vite build --watch"},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"_npmVersion":"10.7.0","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"vite":"^4.4.8","acorn":"^8.11.3","escodegen":"^2.1.0","acorn-walk":"^8.3.2"},"_hasShrinkwrap":false,"devDependencies":{"auto":"^11.1.1","jsdom":"^24.0.0","vitest":"^1.3.1","dedent-js":"^1.0.1","all-contributors-cli":"^6.26.1","@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1"},"_npmOperationalInternal":{"tmp":"tmp/tonic-minijs_1.0.19_1718861326363_0.7903092834844745","host":"s3://npm-registry-packages"}},"1.0.20":{"name":"tonic-minijs","version":"1.0.20","main":"./dist/mini.umd.js","module":"./dist/mini.es.js","author":{"name":"Jen Villaganas"},"license":"MIT","scripts":{"dev":"vite","build":"vite build","build-watch":"vite build --watch","preview":"vite preview","test":"vitest"},"dependencies":{"acorn":"^8.11.3","acorn-walk":"^8.3.2","escodegen":"^2.1.0","vite":"^4.4.8"},"exports":{".":{"import":"./dist/YOUR_LIBRARY_NAME.es.js","require":"./dist/YOUR_LIBRARY_NAME.umd.js"}},"auto":{"plugins":["npm","all-contributors","first-time-contributor","released"]},"devDependencies":{"@auto-it/all-contributors":"^11.1.1","@auto-it/first-time-contributor":"^11.1.1","all-contributors-cli":"^6.26.1","auto":"^11.1.1","dedent-js":"^1.0.1","jsdom":"^24.0.0","vitest":"^1.3.1"},"_id":"tonic-minijs@1.0.20","gitHead":"733837e47a58e32a4858a6ef364adf4e81d2ef3b","description":"Mini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.","_nodeVersion":"20.14.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-NhZ7GTfow+iSHeznVGtFPsrVKK3rTfjEOQkRSZ1k8vjaGzfLmsIIjts0yyTVE7p3i/DALJvoKY9kEDF3BvZBeQ==","shasum":"0a3ce5167a2a15852d76720cc30d5bf069c9def5","tarball":"https://registry.npmjs.org/tonic-minijs/-/tonic-minijs-1.0.20.tgz","fileCount":4,"unpackedSize":606899,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDI2J9mx5p284Z7kRfGH3BZmm5QjFBlHjTgG75by+ov5AIgeOvx6S3PFLW3yTnzMhqYlaj0fRNOEYu0S7cb8X2hlDU="}]},"_npmUser":{"name":"puripurii","email":"jengkarlong@gmail.com"},"directories":{},"maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tonic-minijs_1.0.20_1718865454370_0.9240245087683392"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-14T07:01:45.367Z","modified":"2024-06-20T06:37:34.836Z","1.0.1-canary.6cdf28f.0":"2023-08-14T07:01:45.583Z","1.0.1-canary.c0546f6.0":"2023-08-15T07:38:20.575Z","1.0.1-canary.0db6f78.0":"2023-08-15T07:51:43.443Z","1.0.1-canary.7fe4c96.0":"2023-08-17T06:53:36.315Z","1.0.1-canary.b64453f.0":"2023-08-22T08:14:17.342Z","1.0.1-canary.2387020.0":"2023-10-04T00:23:41.472Z","1.0.1-canary.174fecc.0":"2023-10-04T00:37:11.900Z","1.0.2-canary.6674109.0":"2023-10-04T00:48:19.639Z","1.0.2-canary.921427a.0":"2023-10-12T16:20:48.126Z","1.0.2-canary.85bbd3a.0":"2023-10-17T07:39:21.331Z","1.0.2-canary.1fc8ad4.0":"2023-10-17T11:53:29.858Z","1.0.2-canary.8b6c3bf.0":"2023-10-18T03:43:59.943Z","1.0.2-canary.03b86a9.0":"2023-11-07T06:49:44.462Z","1.0.2-canary.310b96a.0":"2023-11-07T07:43:23.279Z","1.0.2-canary.0c7d7bc.0":"2023-11-07T08:25:39.869Z","1.0.2-canary.5098f23.0":"2023-11-07T09:17:00.084Z","1.0.2-canary.3d1e9e4.0":"2023-11-07T09:23:00.414Z","1.0.2-canary.bee500d.0":"2023-11-07T10:17:16.310Z","1.0.2-canary.1.2022f91.0":"2023-11-07T10:24:20.857Z","1.0.2-canary.1.0312ba6.0":"2023-11-07T10:25:19.717Z","1.0.2-canary.1ef9a54.0":"2023-11-07T10:32:41.009Z","1.0.2-canary.b2d7bc9.0":"2023-11-07T10:48:37.807Z","1.0.2-canary.651ed1d.0":"2023-11-09T04:55:48.224Z","1.0.2-canary.049e353.0":"2023-11-09T08:52:17.419Z","1.0.2-canary.aca1db9.0":"2023-11-09T10:15:14.546Z","1.0.2-canary.2.b55e1ca.0":"2023-11-09T11:03:40.072Z","1.0.1-canary.8e65766.0":"2023-11-14T07:09:50.875Z","1.0.1-canary.3.100bbae.0":"2023-11-14T07:36:22.611Z","1.0.1-canary.3.7ed1cb7.0":"2023-11-14T07:38:29.838Z","1.0.1-canary.7c9553e.0":"2023-11-14T07:39:42.035Z","1.0.1-canary.4.e1daec9.0":"2023-11-14T07:40:28.307Z","1.0.1-canary.6f037a8.0":"2023-11-14T10:06:05.596Z","1.0.1-canary.b3d7298.0":"2023-11-15T13:39:11.080Z","1.0.1-canary.872a949.0":"2023-11-16T06:48:05.961Z","1.0.1-canary.2c4b1a3.0":"2023-11-16T08:54:09.637Z","1.0.1-canary.17f337e.0":"2023-11-16T09:47:32.403Z","1.0.1-canary.99efeae.0":"2023-11-16T10:28:53.997Z","1.0.1-canary.46ebf41.0":"2023-11-16T11:50:45.145Z","1.0.1-canary.46ebf41.1":"2023-11-16T11:51:13.145Z","1.0.1-canary.c0ee54c.0":"2023-11-16T15:56:42.172Z","1.0.1-canary.4069a3f.0":"2023-11-16T16:05:17.498Z","1.0.1-canary.e9703f8.0":"2023-11-21T05:02:37.371Z","1.0.1-canary.8a15a7f.0":"2023-11-21T05:30:36.143Z","1.0.1-canary.d3a7e6b.0":"2023-11-21T09:07:36.874Z","1.0.1-canary.4b3045c.0":"2023-11-22T07:09:29.055Z","1.0.1-canary.879e850.0":"2023-11-22T07:13:07.884Z","1.0.1-canary.d916721.0":"2023-11-22T07:19:48.695Z","1.0.1-canary.ef03957.0":"2023-11-22T17:54:53.122Z","1.0.1-canary.92d5f19.0":"2023-11-23T06:39:47.506Z","1.0.1-canary.5ab74a7.0":"2023-11-23T06:40:01.690Z","1.0.1-canary.52866c5.0":"2023-11-23T06:47:47.938Z","1.0.1-canary.4a8488a.0":"2023-11-23T08:45:21.484Z","1.0.1-canary.9cd4ecd.0":"2023-11-23T08:47:39.927Z","1.0.1-canary.0c6ba1d.0":"2023-12-17T05:03:10.739Z","1.0.1-canary.7.3125182.0":"2023-12-17T05:38:13.972Z","1.0.1-canary.5.ab7dcf5.0":"2023-12-19T11:44:23.773Z","1.0.1-canary.6.6917443.0":"2023-12-19T11:44:36.234Z","1.0.1-canary.7.0ded757.0":"2023-12-19T11:44:53.659Z","1.0.1-canary.33d5ee3.0":"2023-12-19T11:48:30.006Z","1.0.1-canary.5045613.0":"2024-02-04T04:40:42.920Z","1.0.1-canary.1e28172.0":"2024-02-04T04:41:51.361Z","1.0.1-canary.de63c6c.0":"2024-02-04T15:10:35.529Z","1.0.1-canary.417afa7.0":"2024-02-05T03:23:12.227Z","1.0.1-canary.d5a8da4.0":"2024-02-05T07:24:06.976Z","1.0.1-canary.c97d304.0":"2024-02-05T08:34:38.573Z","1.0.1-canary.11e8f2b.0":"2024-02-05T08:51:26.422Z","1.0.1-canary.c6339b2.0":"2024-02-05T09:08:50.376Z","1.0.1-canary.c3e7b14.0":"2024-02-05T09:11:43.623Z","1.0.1-canary.742f058.0":"2024-02-06T04:02:12.679Z","1.0.1-canary.33aed90.0":"2024-02-06T04:02:41.820Z","1.0.1-canary.247318d.0":"2024-02-06T04:43:31.639Z","1.0.1-canary.c3cac78.0":"2024-02-06T04:44:04.494Z","1.0.1-canary.c5816c7.0":"2024-02-06T04:52:30.498Z","1.0.1-canary.8.eb1631a.0":"2024-02-06T06:21:23.801Z","1.0.1-canary.8.fee22b1.0":"2024-02-06T07:16:33.396Z","1.0.1-canary.8.1c425c0.0":"2024-02-06T07:27:14.136Z","1.0.1-canary.8.6d910a9.0":"2024-02-09T03:36:41.266Z","1.0.1-canary.8.5bc7ddb.0":"2024-02-09T03:37:58.386Z","1.0.1-canary.9e9cd86.0":"2024-02-09T03:41:18.411Z","1.0.1-canary.8.ad24fea.0":"2024-02-09T04:20:30.216Z","1.0.1-canary.e8943dc.0":"2024-02-09T04:49:22.979Z","1.0.1-canary.245332e.0":"2024-02-09T04:50:46.283Z","1.0.1-canary.ba7086e.0":"2024-02-09T05:06:27.033Z","1.0.1-canary.fea8996.0":"2024-02-09T05:34:39.595Z","1.0.1-canary.7f263a3.0":"2024-02-09T06:22:42.583Z","1.0.1-canary.b48f0b2.0":"2024-02-09T06:43:30.669Z","1.0.1-canary.99d2597.0":"2024-02-09T06:59:18.008Z","1.0.1-canary.94c85ee.0":"2024-02-10T07:25:35.503Z","1.0.1-canary.f28c565.0":"2024-02-10T07:33:19.776Z","1.0.1-canary.2089454.0":"2024-02-10T08:16:15.008Z","1.0.1-canary.78a3925.0":"2024-02-10T10:37:03.116Z","1.0.1-canary.2bca46d.0":"2024-02-10T14:24:52.721Z","1.0.1-canary.6495dda.0":"2024-02-12T05:22:26.449Z","1.0.1-canary.cdefac6.0":"2024-02-12T05:22:33.932Z","1.0.1-canary.9.7bf50b7.0":"2024-02-12T05:24:14.472Z","1.0.1-canary.10.2a0246a.0":"2024-02-12T05:26:05.481Z","1.0.1-canary.d2a02d1.0":"2024-02-12T11:23:46.645Z","1.0.1-canary.11.789f5c1.0":"2024-02-14T03:35:15.541Z","1.0.1-canary.11.d4ee575.0":"2024-02-14T04:05:04.301Z","1.0.1-canary.11.b216062.0":"2024-02-14T04:05:43.659Z","1.0.1-canary.11.0008af8.0":"2024-02-14T04:14:03.287Z","1.0.1-canary.11.a129aa8.0":"2024-02-14T04:15:51.611Z","1.0.1-canary.17caa09.0":"2024-02-14T04:41:49.699Z","1.0.1-canary.12.9c978f6.0":"2024-02-14T04:44:09.356Z","1.0.1-canary.15b10bb.0":"2024-02-14T06:05:16.035Z","1.0.1-canary.13.f038549.0":"2024-02-14T08:09:20.197Z","1.0.1-canary.ba60d67.0":"2024-02-16T02:25:23.054Z","1.0.1-canary.19f62c6.0":"2024-02-16T03:00:54.024Z","1.0.1-canary.87c237a.0":"2024-02-16T03:14:44.196Z","1.0.1-canary.13.2bc453b.0":"2024-02-16T03:20:07.772Z","1.0.1-canary.13.2e85fd5.0":"2024-02-16T03:47:25.013Z","1.0.1-canary.13.6366e73.0":"2024-02-16T04:10:33.571Z","1.0.1-canary.13.97b1abe.0":"2024-02-16T05:13:14.126Z","1.0.1-canary.13.3b2fd84.0":"2024-02-16T05:16:26.310Z","1.0.1-canary.13.d0074c8.0":"2024-02-16T05:22:45.827Z","1.0.1-canary.74e23af.0":"2024-02-16T05:42:06.524Z","1.0.1-canary.14.a9952b4.0":"2024-02-16T08:11:17.391Z","1.0.1-canary.14.e04b4d9.0":"2024-02-16T08:25:22.375Z","1.0.1-canary.14.c535282.0":"2024-02-16T09:30:08.834Z","1.0.1-canary.14.c08dc9f.0":"2024-02-16T09:49:44.856Z","1.0.1-canary.279cdd3.0":"2024-02-19T05:30:07.789Z","1.0.1-canary.31150fd.0":"2024-02-19T05:58:22.963Z","1.0.1-canary.436e932.0":"2024-02-19T09:26:37.255Z","1.0.1-canary.15.19aaccb.0":"2024-02-19T09:28:48.639Z","1.0.1-canary.52905a5.0":"2024-02-19T10:05:13.802Z","1.0.1-canary.dd97c1d.0":"2024-02-19T10:07:51.015Z","1.0.1-canary.ec88dca.0":"2024-02-19T10:11:40.849Z","1.0.1-canary.1d0892b.0":"2024-02-19T11:01:24.243Z","1.0.1-canary.23b565c.0":"2024-02-19T11:22:51.258Z","1.0.1-canary.cd1b1a7.0":"2024-02-20T04:39:09.022Z","1.0.1-canary.c776dd2.0":"2024-02-20T04:43:30.514Z","1.0.1-canary.37874ee.0":"2024-02-20T04:45:21.763Z","1.0.1-canary.2badc6f.0":"2024-02-20T08:34:27.140Z","1.0.1-canary.59ed8a4.0":"2024-02-20T16:06:39.452Z","1.0.1-canary.b00c6a7.0":"2024-02-20T16:08:27.403Z","1.0.1-canary.bfe3b36.0":"2024-02-21T07:21:58.893Z","1.0.1":"2024-02-26T10:04:58.552Z","1.0.2--canary.374701e.0":"2024-02-26T11:54:06.102Z","1.0.2--canary.f033eca.0":"2024-02-27T09:47:08.392Z","1.0.2--canary.baa101f.0":"2024-02-27T09:47:10.521Z","1.0.2--canary.20.ed27712.0":"2024-02-27T13:27:43.131Z","1.0.2--canary.20.a6adeed.0":"2024-02-27T13:37:28.864Z","1.0.2--canary.21.bcb1765.0":"2024-02-27T13:38:46.770Z","1.0.2--canary.21.3db67f4.0":"2024-02-27T13:45:39.693Z","1.0.2--canary.19.5a0dc37.0":"2024-02-27T13:56:22.740Z","1.0.2--canary.19.98dd0c8.0":"2024-02-27T13:58:57.167Z","1.0.2--canary.19.c651a29.0":"2024-02-27T14:11:31.396Z","1.0.2":"2024-02-27T14:16:01.313Z","1.0.3--canary.19.2522612.0":"2024-02-27T14:16:44.626Z","1.0.3--canary.0ced10f.0":"2024-02-27T14:44:30.352Z","1.0.3--canary.22.13ca8a3.0":"2024-02-29T05:38:59.477Z","1.0.3":"2024-02-29T06:39:11.091Z","1.0.4":"2024-03-08T10:42:29.532Z","1.0.5":"2024-03-08T11:05:39.232Z","1.0.6":"2024-03-17T07:16:20.167Z","1.0.7":"2024-03-17T13:00:24.889Z","1.0.8":"2024-03-20T11:16:59.834Z","1.0.9":"2024-03-23T08:43:54.468Z","1.0.10":"2024-03-24T07:00:03.372Z","1.0.11":"2024-03-24T08:04:35.922Z","1.0.12":"2024-03-25T11:19:18.752Z","1.0.13":"2024-03-25T12:19:16.318Z","1.0.14":"2024-03-25T12:42:38.815Z","1.0.15--canary.30e7bd3.0":"2024-03-27T14:07:24.799Z","1.0.15":"2024-04-13T05:04:01.440Z","1.0.16--canary.17af79a.0":"2024-05-03T15:21:46.780Z","1.0.16--canary.25.41c5756.0":"2024-06-08T13:41:38.981Z","1.0.16--canary.25.0ead842.0":"2024-06-08T13:51:28.463Z","1.0.16--canary.25.e930d41.0":"2024-06-09T08:16:36.676Z","1.0.16--canary.25.faaaa70.0":"2024-06-09T08:17:47.457Z","1.0.16--canary.25.b264c14.0":"2024-06-09T08:41:33.401Z","1.0.16--canary.25.7b00afb.0":"2024-06-15T09:45:46.184Z","1.0.16":"2024-06-18T06:29:02.168Z","1.0.17":"2024-06-18T15:36:45.039Z","1.0.18":"2024-06-19T05:41:28.524Z","1.0.19":"2024-06-20T05:28:46.713Z","1.0.20":"2024-06-20T06:37:34.643Z"},"maintainers":[{"name":"puripurii","email":"jengkarlong@gmail.com"}],"author":{"name":"Jen Villaganas"},"license":"MIT","readme":"# MiniJS\n\nMini is a ~~library~~ extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.\n\n## The Idea\n\n- HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.\n- Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:\n - Have a high learning curve when it comes to code patterns and tooling.\n - Are primarily suited for interfaces with _lots_ of interactivity.\n- Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.\n- The key idea is that if we have\n 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and\n 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do.\n- Technically vanilla HTML can already do (1), but it can't do (2).\n\n## Setting State\n\n`State` are variables that changes the UI or the DOM that uses it when they get updated.\n\nNote: Only non-objects are supported for reactive state.\n\n### Setting Initial State\n\nYou can set the initial state of the variables using vanilla JS:\n\n```html\n\n```\n\n### Syncing the DOM with your state\n\nThese are the following **dynamic attributes** that you can use to sync the DOM with your state:\n\n- `:value`\n - Set the value of a form input to the result of the evaluated JS code.\n- `:class`\n - Set the class of a DOM element to the result of the evaluated JS code.\n- `:text`\n - Set the text content of a DOM element to the result of the evaluated JS code.\n\n```html\n\n\n\n\n\n

\n```\n\n### Triggering DOM Updates / Re-renders\n\nA DOM update or a re-render happens when the state variable is re-assigned in **dynamic events**.\n\n```html\n\n\n```\n\nWhen re-assignment happens in dynamic attributes, it will not trigger a re-render to avoid infinite loops.\n\n```html\n

\n\n```\n\n### Special Variables\n\nThere are special variables that you can use inside dynamic attributes and events:\n\n- `this` - the current element\n- `$` - equal to the `document.querySelector`.\n\n## Dynamic Attributes\n\nBesides `:value`, `:class`, and `:text`, you can also make **any** attribute dynamic by renaming it from `attribute` to `:attribute`. Values set to dynamic attributes are evaluated as JavaScript:\n\n```html\n\n\n

My style is changing

\n\n Toggle Style\n\n```\n\n## Classes\n\nYou can make your class names reactive by using the `:class` attribute:\n\n```html\n\n\n\n```\n\n### Setting the Default Classes\n\nTo set default classes, you can use the `class` attribute:\n\n```html\n
\n```\n\n### Setting Multiple Reactive Classes\n\nTo set multiple reactive classes, you can use the `:class` attribute:\n\n1. Use multiple ternary operators enclosed in parentheses:\n\n```html\n\n```\n\n2. Use if-else statements:\n\n```html\n\n```\n\n## Events\n\nYou can create, use, and update state variables inside DOM events.\n\nIn events, you can get the current event using the `event` variable:\n\n```html\n\n```\n\n### Native Events\n\nAll native events are supported. You can use them like this:\n\n```html\n\n```\n\nYou can access the current element in the event via `this`:\n\n```html\n\n\n\n```\n\n### Custom Events\n\nThese are the events added in by MiniJS:\n\n- `:clickout` - This will trigger when the user clicks outside of the current element.\n- `:clickme` - This will trigger when the user clicks the current element.\n- `:change` - This will trigger when the user changes the value of a form input.\n- `:press` - This will trigger when the user:\n - triggers the `click` event.\n - triggers the `keyup.enter` and `keyup.space` events.\n - triggers the `touchstart` event.\n\n### Keyboard Events\n\nFor keyboard events, you can listen to them using `:keyup`, `:keydown`, and `:keypress`:\n\n```html\n\n```\n\n#### Key Modifiers\n\nYou can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:\n\n```html\n\n```\n\nYou can chain multiple key modifiers together:\n\n```html\n\n```\n\nFor key values that have multiple words like `BracketLeft`, except for arrow keys, kebab case is used:\n\n```html\n\n```\n\nThe following are the available key modifiers:\n\n| Type | Key Value | Modifier | Usage |\n| ---------------------------------- | ---------------------------------- | ------------------------------ | --------------------------------------------------- |\n| Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |\n| Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |\n| Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |\n| Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |\n| Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |\n| Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |\n| Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |\n| Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |\n| Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |\n\n> Note: If you don't know the \"name\" of a symbol key, you can use the `console.log(event.code)` to see the key value. Example for the \"Enter\" key: `:keyup=\"console.log(event.code)\"` will log \"Enter\". So you can use `:keyup.enter` to listen to the \"Enter\" key.\n\n---\n\n## Statements\n\n### Each Statement\n\nThe `:each` statement is used to loop through an array and render a template for each item.\n\n```html\n\n\n
    \n
  • \n
\n\n
    \n
  • \n
\n```\n\nYou can also use complex variables for the `:each` statement:\n\n```html\n\n\n
    \n
  • \n
\n```\n\nNote: Each item variables are **read-only**, which means you can't re-assign them like:\n\n```html\n
    \n
  • \n
\n```\n\n## Variables\n\n### Variables saved in Local Storage\n\nAppending `$` to the variable name will save the variable in the local storage:\n\n```html\n\n\n\n```\n\nNote: Currently, this is only available for globally declared variables.\n\n### Variable Scoping\n\n#### Global Variables\n\nWhenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.\n\n```html\n\n\n\n```\n\n#### Local Variables\n\nTo use variables only in a current event, you can create a local variable using `const`, and `let`:\n\n```html\n\n Click Me\n\n```\n\n### Element Variables\n\nIf you want to use the variable across an element's attributes and events, you can use `el.`:\n\n```html\n\n\n\n Click Me\n\n```\n\nLike the example above, `:load` can be used to set the initial value of the variable.\n\n### Scope Variables\n\nAdding a `:scope` attribute to an element will allow you to access its variables from its children using `scope.` variables.\n\n```html\n\n
\n \n \n \n About Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n
\n \n\n \n \n Contact Us\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n \n \n Team 3\n \n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod.\n \n \n\n```\n\nYou can set the default value of the scope variables in the `:scope` directive:\n\n```html\n
\n \n
\n```\n\n### Variable Methods\n\nMiniJS added some commonly-used custom methods to variables.\n\n### Array\n\nHere are the custom array methods which are available for you to use:\n\n- `first` - returns the first item in the array.\n Usage: `array.first`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.first // returns 'Cherries'\n ```\n\n- `last` - returns the last item in the array.\n Usage: `array.last`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.last // returns 'Vanilla'\n ```\n\n- `search` - returns a new array of items that match the query.\n Usage: `array.search('query')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.search('c') // returns ['Cherries', 'Chocolate']\n ```\n\n- `subtract` - removes a list of items from the array if they exist.\n Usage: `array.subtract(['item1', 'item2'])`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.subtract(['Tag 2', 'Tag 3']) // returns ['Tag 1', 'Tag 4']\n ```\n\n- `nextItem` - gets the next item based on the given item in the array.\n Usage: `array.nextItem('item')`\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.nextItem('Tag 2') // returns 'Tag 3'\n ```\n- `previousItem` - gets the next item based on the given item in the array.\n Usage: `array.previousItem('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.previousItem('Tag 2') // returns 'Tag 1'\n ```\n\n- `add` - adds an item to the original array if it doesn't exist.\n - This mutates the original array.\n Usage: `array.add('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']\n ```\n\n- `remove` - removes an item from the original array if it exists.\n - This mutates the original array.\n Usage: `array.remove('item')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']\n ```\n\n- `toggle` - removes / adds the item in the original array\n - This mutates the original array.\n Usage: `array.toggle('item')`\n\n ```js\n array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n array.toggle('Cherries') // removes 'Cherries'\n // returns ['Chocolate', 'Blueberry', 'Vanilla']\n\n array.toggle('Cherries') // re-adds 'Cherries'\n // returns ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']\n ```\n\n- `replaceAt` - replaces the item at the given index with the new item.\n - This mutates the original array.\n Usage: `array.replaceAt(index, 'newItem')`\n\n ```js\n array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']\n array.replaceAt(1, 'Tag 5') // returns ['Tag 1', 'Tag 5', 'Tag 3', 'Tag 4']\n ```\n\n## Contributors\n\n\n\n\n\n \n \n \n \n \n \n
\"\"/
Jen
💻 🚇 📖		\"\"/
tonyennis145
📖 💻		\"\"/
Joeylene
🚇 💻 📖 ⚠️		\"\"/
Jen
📖 💻
\n\n\n\n\n\n\n\n\n## Installation\n\nTo setup MiniJS in your local machine, you can do the following:\n\n1. Clone the [repository](https://github.com/Group-One-Technology/minijs).\n2. Run `yarn` to install dependencies.\n3. Run `yarn build` to create the `dist` folder -> output for MiniJS.\n4. Run `yarn dev` to run the demo page locally.\n5. Run `yarn build-watch` on another terminal to build the code whenever the Mini.js code changes.\n6. Run `yarn test` to run the tests.\n","readmeFilename":"README.md"}