Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V6 bindings overhaul. #167

Open
17 of 25 tasks
JSideris opened this issue Dec 25, 2023 · 0 comments
Open
17 of 25 tasks

V6 bindings overhaul. #167

JSideris opened this issue Dec 25, 2023 · 0 comments

Comments

@JSideris
Copy link
Owner

JSideris commented Dec 25, 2023

Requirements

  • New system needs to support attribute bindings as well as content bindings on elements.
  • Ability to subscribe to a binding and have a callback that gets called when it changes.
  • Being able to support style changes or trigger a restyle is a must.
  • Class bindings may be considered special. Updating classes may cause a style change. But only for the affected elements.
  • Bindings for conditionals and iterative statements.
  • Instead of inline reactive statements, we can somehow configure dependencies between bindings.
  • Text nodes could be used for inline bindings.
  • Should be possible to pass bindings into components as parameters, and use them inside of those components.
  • Should be possible to configure a one-way binding, perhaps by tying into an update event.
  • Bindings should be two-way. They should be able to update values on the DOM but inputs should also be able to set the binding value (and update everything it's attached to).
  • Deleting an element with a binding should properly release that binding from having to update the component.
  • Need to properly handle binding that are configured inside of false conditions. This was a weakness of previous versions of the framework.
  • Array bindings should have some kind of support to allow binding to each element of the array.
  • It would be nice if we could be intelligent about how we're updating bindings around arrays.
  • Ability to detach a binding from an element, attribute, callback, or other dependency. (Done internally, but not exposed to user).
  • Support for input elements.
  • Support for textarea elements.
  • Support for radio (input) elements.
  • Support for checkbox (input) elements.
  • Support for select elements.
  • Support for option elements.
  • Special support for textarea elements - value pseudo attribute.
  • Special support for select elements - value pseudo attribute.
  • Support for editable elements.
  • May just want to universally open up the value pseudo attribute and use that for 2-way data binding.

Work Breakdown

Binding Objects

We can either use a binding factory or a class. Factory might actually be best. These binding objects could be set up inside of the build function in a component class.

Binding objects will have get and set functions.

Binding Setup

When a VDomNode is passed a binding object as a child (either as an attribute value or content), it will request that the binding keep it posted with any changes. The binding itself will maintain an internal list of VDomNodes that are subscribed to it. Calling the set function on the binding will update the appropriate attribute or element.

Event System

It will be possible to configure a callback that gets called when the binding value gets updated.

Inputs

Updating the binding value can be done any time from anywhere by calling the binding's set function. The framework will also have the ability to update the binding from various input elements such as input and textarea.

Cleanup

Need a way to clean up the binding when the element it's bound do gets destroyed.

@JSideris JSideris self-assigned this Dec 25, 2023
@JSideris JSideris moved this to Todo in DOThtml 6 Dec 28, 2023
@JSideris JSideris moved this from Todo to In Progress in DOThtml 6 Dec 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: In Progress
Development

No branches or pull requests

1 participant