mvcoconut/coconut.diffing

Platform agnostic diffing algorithm to render and update UI hierarchies

coconut.diffing's Issues

Refs are set to null before viewDidUnmount

May only be the case with older versions though.

Missing WidgetLifeCycle.toString when compiling with -D tink_state.debug

Duplicate rendering.

Looks like 11582ce broke the tests, making the inner component render twice on update.

Ignored @:defaults of <Implicit>

When using <Implicit defaults={...}>, components using @:implicit objects in render/@:computed/etc. will get the instance defined in defaults={...} while components only using @:implicit in a callback (onClick for example) will get the @:default instance instead.

Edit: if view is created later on, it will also default to @:default instance instead of the one defined in defaults={...}

View stops rendering even though attributes change

A view that uses a computed property stops getting rendered after a particular sequence of changes to the values of the observables that the computed property depends on.

After a day debugging this weird issue, I've come up with a minimalistic example with which I can reproduce it consistently.

Project download link: https://we.tl/t-3UroiwKtkX

Setup

• Unpack, build with haxe build.hxml.
• Open bin/index.html in the browser.

Steps to reproduce

• Click the first toggle button twice
• Click the second toggle button once

Expected results

• First line of text showing "visible" (matching the state of isVisible, displayed on the last line)
• Clicking the toggle button continues to update the first line of text

Actual results

• First line of text showing "hidden"
• The first line of text never re-renders again, no matter which toggle buttons are clicked

Wrong lifecycle event order

In case a OuterView class have an InnerView class, the calling of afterPatching of the OuterView happens before the patching of the InnerView finishes.

So the order looks like this:

1. OuterView.render
2. OuterView.afterPatching
3. InnerView.render
4. InnerView.afterPatching

The expected order should be like this:

1. OuterView.render
2. InnerView.render
3. InnerView.afterPatching
4. OuterView.afterPatching

Can't run tests

I am getting this error:
/usr/local/lib/haxe/lib/coconut,ui/0,9,0/src/coconut/ui/macros/Generator.hx:63: characters 55-64 : Type not found : TagCreate

Cannot call `Null<coconut.ui.Ref<...>>`

I'm not convinced this isn't my fault, and it could be a compiler regression also

/mnt/dat/lib/haxe/coconut,diffing/git/src/coconut/diffing/internal/VNativeBase.hx:42: characters 15-16 : Null<coconut.ui.Ref<coconut.diffing.internal.RNativeBase.Concrete>> cannot be called
/mnt/dat/lib/haxe/coconut,diffing/git/src/coconut/diffing/internal/VNativeBase.hx:69: characters 17-18 : Null<coconut.ui.Ref<coconut.diffing.internal.RNativeBase.Concrete>> cannot be called
/mnt/dat/lib/haxe/coconut,diffing/git/src/coconut/diffing/internal/VNativeBase.hx:73: characters 17-18 : Null<coconut.ui.Ref<coconut.diffing.internal.RNativeBase.Concrete>> cannot be called
/mnt/dat/lib/haxe/coconut,diffing/git/src/coconut/diffing/internal/VNativeBase.hx:85: characters 15-16 : Null<coconut.ui.Ref<coconut.diffing.internal.RNativeBase.Concrete>> cannot be called
/mnt/dat/lib/haxe/coconut,diffing/git/src/coconut/diffing/internal/VWidget.hx:42: characters 15-16 : Null<coconut.ui.Ref<coconut.diffing.internal.RWidget.Concrete>> cannot be called
/mnt/dat/lib/haxe/coconut,diffing/git/src/coconut/diffing/internal/VWidget.hx:55: characters 17-18 : Null<coconut.ui.Ref<coconut.diffing.internal.RWidget.Concrete>> cannot be called
/mnt/dat/lib/haxe/coconut,diffing/git/src/coconut/diffing/internal/VWidget.hx:59: characters 17-18 : Null<coconut.ui.Ref<coconut.diffing.internal.RWidget.Concrete>> cannot be called
/mnt/dat/lib/haxe/coconut,diffing/git/src/coconut/diffing/internal/VWidget.hx:71: characters 15-16 : Null<coconut.ui.Ref<coconut.diffing.internal.RWidget.Concrete>> cannot be called

specific calls look like

switch v.ref {
      case null:
      case f: f(widget);
    }

which seems legit where ref is Null<Ref<...>>

Support returning none or multiple children from view.

Add some documentation

Ideally should contain an example on how to create a coconut.ui backend with this.

Child subtree may remain invalid.

It looks like occasionally not all invalid children are rerendered. To make matters worse this requires relatively complex trees to reproduce.

Don't clear refs when they don't change.

Refs not always reset to null.

The fix of #5 sometimes leads to refs not being properly set back to null upon removal.

Consider making WidgetType an interface.

The anonymous object may impact performance (although perhaps negligibly, compared to construction / update).

Add delete to NodeType

For @nadako

delete would be useful, also in cases when you need to unload some dynamic texture from VRAM etc

Conditional rendering of fragments throws error on unmounting

class Frag extends View {
  @:state var show:Bool = false;
  function render() {
    return (
      <div>
        <if {show}>
          <>
            <span>Hello </span>
            <span>world</span>
          </>
        </if>
        <button onclick={show = !show}>switch fragments</button>
      </div>
    );
  }
}

Clicking the button first time shows spans, clicking the second time crashes the app with Uncaught (in promise) Error: assert in coconut_vdom__$Renderer_DomCursor.delete().

Fragments here are not necessary of course, but the same error occurs if <Implicit /> is used instead

<if {show}>
  <Implicit defaults={[ Frag => this ]}>
    <span>Hello </span>
    <span>world</span>
  </Implicit>
</if>

React does not complain about such using of fragments btw.

String as fragment content

With fragment it fails with String should be coconut.diffing.VNode<js.html.Node>

<>
  ${Std.string(1)}
</>

but works with a div

<div>
  ${Std.string(1)}
</div>