HTML only

[John-Paul Harold]

Looking through the code I think I can guess the answer to this, but will ask anyway.

Is this library HTML (react-dom) only, or can you see this being usable on other renderers, such as React Native?

[James Please]

Great question. I have no experience with React Native, so I'm honestly not sure! I'd be surprised if the lib supports it natively right now (although it might?), but my expectation is that if it doesn't, it should be possible to update it so that it's more generic...but again, I lack the knowledge and use case so I wouldn't be able to do update unfortunately.

[John-Paul Harold]

Turns out that yes, it can work with renderers other than react-dom. Small ish video of your lib, wired into a simple app using "Revas" (https://github.com/pinqy520/revas), which renders your vDom to a canvas surface.

revas-lrud.mov

That's your "basic-layout" example, redone in the styling idioms of the Revas renderer, which isn't a million miles away from React Native.

If you think this is something that could be a worthwhile addition to repo I can raise a PR.

[James Please]

That's awesome @JohnPaulHarold !!

How long do you think it'd take to make a PR? I'd be curious to get a sense of what the scope of the changes would be, and how much effort it'd be to continue maintaining it going forward.

[John-Paul Harold]

I'd be curious to get a sense of what the scope of the changes would be

The changes are quite simple so far; there are duplicate props for the various classNames, accepting style objects over strings. It's much the same as what happens with the className.

For example (shortened a bit, but gets across the point):

const styles = {
  blockContainer: {
    ...
  },
  blockContainerVertical: {
    flex: 1,
    flexDirection: 'column',
  },
  isFocused: {
    borderColor: '#530db1',
    borderWidth: 1,
    borderStyle: 'solid',
  },
}
<FocusNode
  elementType={View}
  style={{ ...styles.blockContainer, ...styles.blockContainerVertical }}
  focusedStyle={styles.isFocused}
  orientation="vertical"
>

and then over in focus-node.ts, we compose those and apply as a style prop on the child component

const computedStyle = {
  ...style,
  ...(node.isFocused ? focusedStyle : {}),
  ...(node.isFocusedLeaf ? focusedLeafStyle : {}),
  ...(node.disabled ? disabledStyle : {}),
  ...(node.active ? activeStyle : {}),
};

how much effort it'd be to continue maintaining it going forward

The above seems to work, is quite simple, but it does feel like a duplication. Maybe there's a discussion to be had if some duplication is fine, or if these focus states could be generalised further. Like, would there be a use case for props other than className or style to be modified on the various focus states?

How long do you think it'd take to make a PR

• I'd like to recreate some of your other examples, I think that would be worthwhile.
• I'd like to write some tests for these changes - both of those todos might take a bit of time.
• Update the docs.
• A demo using Revas for your examples folder would also probably be helpful.

What I can also do is push up my branch before creating any PR if you'd like to look at it right now. If what's there looks enough for an initial PR I can put something together fairly quickly. The above might not all need to be done in one PR either.

[James Please]

Going to close this for now, but if anyone else is interested in taking this on feel free to comment and we can continue the convo.