Lilhx is a to-be frontend framework that introduces a reactive state management system along with features reminiscent of htmx. This framework empowers developers to build dynamic and responsive web applications effortlessly. Here's an elaborate exploration of some key features:
lilhxDemoCompiled.mp4
Lilhx incorporates a reactive state management system, enabling developers to effortlessly handle and manipulate the state of their web applications. This reactive approach ensures that changes in state trigger automatic updates, providing a seamless and efficient user experience.
- Verbs:
- Fetch:
- Attribute:
fetch="url" - Method:
method="get"(default) or any HTTP method - Actions:
swap_inner: Replace inner contentswap_outer: Replace the entire elementappend: Append contentprepend: Prepend contentn_swap: Replace the nth child element (n_swap=1for the first child,n_swap=nfor the nth child)callback: Execute a custom function (function_name) on successful fetch response. The function receives three parameters:element,target, andfetch_response. Thefetch_responseis expected to be a text containing HTML/markup for the next state or the body of an element.
- Attribute:
- Fetch:
- Stateful Actions:
- Save State: Use
save_stateattribute to persist the current state in the body. - Load State: Use
load_stateattribute to load a previously saved session state.
- Save State: Use
-
Verbs:
- Drag:
- Attribute:
dragable - Destination:
attach_to="target"requires attachable target,if not provided will attach to any attachables - Float :-
float; if set this elemnt will float and will be direct child of<body>withabsoluteposition if it not dragged into any attachables,it also doesnot preserves the old state of the element, like it's position,parent,siblings, other feature like attributes,classname and inner/outerHTML are preserved -Secondary Attribute:nodrag:- use this on the child of the dragable div/node to prevent unnecessary drag event or limit the dragable area
- Attribute:
- Attachable:
- Attribute:
attachable - Action:
swap_inner:- replace the innerHTML content ofattachablewithdragableelementswap_outer:- replace the outerHTML content ofattachablewithdragableelementappend:- inserts at end of the attachable div/blockprepend:- inserts atfirst of the attachable div/blockbefore_child:- inserts before the child the mouse is onafter_child:- inserts after the child the mouse is on
- Tigger:
callbackget's tiggred when dragable is draged tothis
- Attribute:
- Drag:
-
Stylying
[dragable]:- for designing the dragable components[moving]:- for styling when the component is in middle of moving or currenlty moving/active
PS:- their will be a style element added by lilhx in your rendred HTML, with
id"lil_hx_stylesheet", which can be removed to remove the default styling by lilhx[nostyle]:- put this in body/html tag to remove the lilhx style,if you don't know much about other way
- Ongoing Development: Lilhx is a work in progress and aims to provide a synergy of features from htmx and React. Stay tuned for more exciting updates and enhancements.
Lilhx is designed to streamline the development process, offering a harmonious blend of reactivity and powerful event handling. It caters to the needs of developers who seek a modern and efficient framework for crafting dynamic web applications.
<! This is generated by prompting ChatGpt 3.5!>