rmosolgo / batman-react-trial

messing around with batman.js and react

Batman.js & React

Batman.js rendering batman.js templates with React. Live on firebase.

The Good

• HTML templates are converted into React components (could be better: could be done at "compile"-time)
• JSX is invoked with Batman.DOM, whose functions return descriptor-like objects
• Batman.Controller::renderReact puts components into data-yield containers
• renderReact is a drop-in replacement for render
• During render, descriptors are enriched with one-way "bindings" that match the existing batmanjs binding API
• Batman.ContextObserver stores observers for forceUpdate-ing the component

The Bad

Getting context into the components and observing it properly is not good yet.

ContextObserver still has some leaks:

• Binding to new objects (eg the newAnimal form at the bottom of the home page)
• It will keep tracking items that were removed from data-foreach collections :(

The whole injectedContext idea is weak too: I spit POJOs into child descriptors so their bindings can lookup against them.

The Ugly

TODO:

• make observing/context not terrible
• support named default components (eg AnimalsIndexComponent) whose render functions are derived from HTML templates (a la batman.js default viewshttps://www.softcover.io/read/b5c051f3/batmanjs_mvc_cookbook/controller#sec-default_views)
• implement the rest of the bindings
• add data-component="#{myComponent}" and use that for data-view, too
• support HTML template => render function at compile time

Development:

• $ npm install && npm install -g gulp
• $ gulp

batman-react-trial's Issues

data-showif's modifications to style aren't applied

This is about code on the better-context branch.

I use data-showif to modify a descriptor's props.style.display:

    style = @descriptor.props.style || {}
    if shouldShow
      delete style.display
    else
      style.display = 'none !important'
    @descriptor.props.style = style

(full source)

Here's an example from animals/show:

  <p data-showif='animal.animalClass | eq "Mammal"'>
    Mammalian
  </p>
  <p data-showif='animal.animalClass | eq "Reptile"'>
    Reptilian
  </p>

It works on initial page load, but not on subsequent renders when the data has changed. For example, if I change T-Rex to Mammal, it should hide "Reptilian" and show `"Mammalian".

It looks like the transformation is applied. You can see display: none !important in the React plugin:

But it doesn't seem like the DOM is affected. Both elements are visible:

And in the chrome inspector, neither one has style.display:

Idea

I haven't looked deeply at your implementation but you are saying that you have issues knowing when to update the React component.

A common pattern used by Meteor and Vue.js is to replace every time you read a value by a getter. What you do is run the function, see all the values that have been accessed, do a diff of what has been accessed during the previous round and add/remove the listeners accordingly.

This way, you can have arbitrary javascript code running and still have precise data binding.