├── .github └── FUNDING.yml ├── LICENSE ├── README.md ├── demos ├── Simple Calculator │ ├── index.html │ └── script.js └── Simple Landing Page │ ├── app.js │ ├── components │ ├── footer.js │ ├── header.js │ └── hero.js │ └── index.html ├── lib └── queflow.js └── package.json /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: queflowjs 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Dayson9 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # QueFlowJS 2 | 3 | **_QueFlowJS_** is a JavaScript library for building performant web apps in a declarative manner. Offers some APIs that makes the development of web apps easier and faster. -------------------------------------------------------------------------------- /demos/Simple Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Calculator : QueFlowJS 8 | 9 | 10 | 11 | 18 | 19 |

20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /demos/Simple Calculator/script.js: -------------------------------------------------------------------------------- 1 | import { App } from 'queflow'; 2 | 3 | 4 | const styles = { 5 | "*": ` 6 | text-align: center; 7 | display: block; 8 | transition: .3s; 9 | font-family: 'sans-serif'; 10 | `, 11 | ".out": ` 12 | font-weight: 500; 13 | font-size: 20px; 14 | color: rgb(24, 65, 70); 15 | `, 16 | "input": ` 17 | width: 60%; 18 | height: 40px; 19 | border: none; 20 | background: rgba(0,0,255,0.1); 21 | border-radius: 5px; 22 | margin-left: 20%; 23 | outline: none; 24 | box-sizing: border-box; 25 | `, 26 | "input:focus": ` 27 | outline: none; 28 | border: 2px solid rgba(0,55,255,0.4); 29 | `, 30 | 31 | "button": ` 32 | width: 60%; 33 | height: 40px; 34 | border: 2px solid rgba(0, 90, 255, .1); 35 | background: rgba(0, 90, 255, .7); 36 | border-radius: 5px; 37 | margin-left: 20%; 38 | color: white; 39 | margin-top: 20px; 40 | transition: 0.3s; 41 | `, 42 | 43 | "button:active": ` 44 | background: rgba(0, 90, 255, .86); 45 | ` 46 | }; 47 | 48 | 49 | const calculator = new App("#app", { 50 | data: { 51 | out: 20*20 52 | }, 53 | stylesheet: styles, 54 | template: () => { 55 | return ( 56 | ` 57 |

Simple Calculator App

58 | 59 |

Output: {{ out }}

60 | 61 | 62 | 63 | 64 | ` 65 | ) 66 | } 67 | }); 68 | 69 | calculator.render(); 70 | -------------------------------------------------------------------------------- /demos/Simple Landing Page/app.js: -------------------------------------------------------------------------------- 1 | import Header from './components/header.js'; 2 | import Hero from './components/hero.js'; 3 | import Footer from './components/footer.js'; 4 | 5 | import { App } from 'queflow'; 6 | 7 | 8 | const LandingPage = new App("#app", { 9 | stylesheet: { 10 | "*": ` 11 | font-family: Sans-serif; 12 | text-align: center; 13 | `, 14 | ".green": "color: #148A81", 15 | ".dark": "color: rgb(6,27,60);", 16 | }, 17 | template: () => { 18 | return ` 19 |

20 | 21 |