DOM Component abstraction issues encountered with Eve

abstraction-issues.eve.md

Abstraction Issues

This is a rundown of all the DOM Component abstraction issues I encountered while attempting to modularize my Eve code. I made each major issue an h2 header, provided examples as h3 headers.

Component system via search/bind very limited

The nested search/bind componentizing pattern only works for very simple data structures, as it seems the DOM is first rendered, then searched for tags.

Test Data

#time-string instead of #time to reduce surface area of what might be going wrong

commit
  [#experience
    title: "Morning Meditation"
    interval: [#interval start: "7:15" end: "8:35"]]
  [#experience
    title: "Lunch"
    interval: [#interval start: "12:15" end: "13:15"]]

Time Formatter Component

search @browser @virtual-dom
  time-view = [#time-view time]

bind @browser  @virtual-dom
  time-view <- [#span class: "time" text: time]

Interval Formatter Component

// This search is the failure point on #interval,
// Presumably because the variable interval in the root app
// isn't expanded before searching
search @browser  @virtual-dom
  interval = [#interval start, end] 

bind @browser  @virtual-dom
  interval <- [#span interval children:
    [#time-view time: start],
    [#span class: "divider" text: "-"],
    [#time-view time: end]]

Experience List Root Component

// with full destructuring and restructuring
search
  experience = [#experience title,
    interval: [#interval start, end]]

bind @browser
  [#div class: "experience-list" children:
    [#h3 text: "Experience List with full destructuring:"]
    [#div experience class: "experience" children:
      [#interval start, end],
      [#span class: "divider" text: ": "]
      [#span text: title]]]

Variables are not found in searches and rebound

If I try to avoid destructuring and restructuring #interval, then the variable is not found in the component searches, and thus not rebound

Experience List with Variable

// with interval as variable, [#interval] isn't matched
search
  experience = [#experience interval, title]

bind @browser
  [#div class: "experience-list" text: "foo" children:
    [#h3 text: "Experience List with Variable:"]
    [#div experience class: "experience" children: (
      interval,
      [#span class: "divider" text: ": "],
      [#span text: title])]]

@browser only renders literal records

Virtual DOM attempt

This is an attempt to bind to a @virtual-dom database, which will then be search/rebound, and then rendered to the @browser. It doesn't work at all, because the browser only renders literal records, and won't render searched for records:

search
  experience = [#experience interval, title]

bind @virtual-dom
  [#app #div class: "experience-list" children:
    [#h3 text: "Virtual Dom Experience List:"]
    [#div experience class: "experience" children: (
      interval,
      [#span class: "divider" text: ": "],
      [#span text: title])]]

search @virtual-dom
  app = [#app class children]
  
bind @browser
	[#div text: "Virtual Dom for class: {{class}}" children: app]

Snippets

The issue distilled:

commit
  [#snippet #span text: "Example tag-as-record"]

search
  snippet = [#snippet]
  
bind @browser
	[#div children: (
    [#h3 text: "Snippets:"]
    snippet)]

I wanted to disable a lot of these blocks, but it breaks formatting. The Experience List With Variable block in particular breaks the entire program until you use the inspector.

Issues addressed in the related google groups thread. Essentially you just have to query @browser @session and merge into @browser, like so:

Experience

search @browser @session
  experience-display = [#display experience]
​
bind @browser
  experience-display <- [#div experience class: "experience" children:
      [#display interval: experience.interval]
      [#span class: "divider" text: " : "]
      [#span text: experience.title]]

​

Experience List

search
  experience = [#experience title interval]
​
bind @browser
  [#div class: "experience-list" children:
    [#h3 text: "Experience List:"]
    [#display experience]]