POC with Next.js and feedback

[Vadorequest]

I'm building a POC using Next.js + Reaflow, hosted on Vercel.

It's open source (MIT), see https://github.com/Vadorequest/poc-nextjs-reaflow
Online demo hosted on Vercel at https://poc-nextjs-reaflow.vercel.app/

Here is a little feedback about using Reaflow:

• framer-motion is a peer-dependency but it's not explicit on the README, I had to figure it out myself. Importing reaflow will crash the whole app if it's not installed.
  • This should be explicitly documented.
• reaflow doesn't play well on the server (Next.js renders on both server + client) and should only be rendered on the client
  • This should be explicitly documented.
• foreignObject and events, bad DX, no example (spent quite some time on this)
  • Could have a SB example
  • Using React Select doesn't work It's actually because of foreignObject and CSS display property, need to document how to workaround
  • Add DB demo or documentation as to why it doesn't work, workarounds, etc.

I'll add more feedback as my POC grows.

---

PR trackings (all the things I wanna do):

Features:

• ✍️ Initialize Undo/Redo with existing history - 🎉 PR Import existing undo/redo history when initializing the Undoo instance #69
  • Issue: Feature request - Initialize Undo/Redo with existing history #53
• Changing the Undo/Redo API (expose more internal variables + option to disable keyboard shortcuts)
  • Undo doesn't handle mass undos, history gets partially lost #60
• ✅ Changing the Edge/Ports component API (adding children) - 🎉 PR Add children property to Edges/Port components #76
  • Edges/Ports should support children property (similar to Nodes) #67

Documentation:

• ✅ PR for documentation (README) - 🎉 PR Add Next.js example + improve existing example + Add community use-cases #71
  • Next.js support
  • framer-motion peer-dependency, etc.
  • Community examples (https://github.com/Vadorequest/poc-nextjs-reaflow)
  • linking react/react-dom Hooks don't work with yarn link facebook/react#14257 (comment)
• ✅ PR for documentation (Examples) - 🎉 PR Improve Linking Nodes documentation example + add extended helpers #72
  • Advanced utilities Feature request - Improve addNodeAndEdge utility to also bind edges to ports #47 (comment)
  • See setEdges is undefined on Storybook demo #42
• ✅ PR for advanced explanations regarding foreignObject and its usage and limitations - 🎉 PR Add advanced documentation for custom nodes (foreignObject) #74
  • Needs more discussion, unclear what should be done atm. (FAQ?)
  • See Using foreignObject "steals" all Node events (onEnter, etc.) - How to forward events when using foreignObject? #45
  • See Foreign Object #34
  • See useSelection hook onKeyDown event doesn't work with foreignObject - Multiple selection doesn't work when using a foreignObject #50
  • See React select component displays/hides itself randomly (as foreignObject) #44
• ✅ PR for documentation about using immutable objects when using setState - 🎉 PR Add doc about React state immutability #73
  • Calling setNodes doesn't update nodes - Trying to make a Node height dynamic based on textarea input size #43
• ✍️ PR about ELK FAQ, tricks and limitations (README?) - 🎉 PR Add ELK documentation #75
  • Custom Dragging #4
  • Guidance on Customizing Layout after Render (aka incremental/dynamic layout) kieler/elkjs#100
  • [question] Individual Spacing kieler/elkjs#123

Bug fixes:

• ✅ TypeScript types (wrong types and inconsistent naming) - 🎉 PR: Improve TS documentation #63

[amcdnl]

1. RE: framer-motion - Yes, that was kind of a mistake but I literally changed it yesterday but haven't pushed the change yet. Will be pushed today.
2. RE: next - Ya I'm not surprised - this is probably a combination of elkjs web worker and framer-motion. Happy to get a PR to support this though. Would you mind PR'ing that into the docs?
3. RE: project - I will add a new section in docs to list active projects using this for others to learn from!!!

[Vadorequest]

Thanks for the quick feedback, I'll make a PR once I'll have a better overview of all the stuff that should be updated, still digging into the doc and testing stuff out.

First impression is excellent, the foundation of reaflow are solid. Proper TS support, Storybook documentation give quite a good developer experience. 👍

If you'd like, I could explain a bit more what I'm trying to achieve with Reaflow, and maybe you could tell me what's currently possible, what's not yet, and what are the features I need that you want to add to reaflow in the future?

[amcdnl]

Sure - would encourage you to join the discord channel - https://discord.com/invite/tt8wGExq35

[Vadorequest]

Oh, great, I had missed that! Thanks.

Also, I noticed there is no tests (AFAICT). I believe it would greatly increase collaborator's confidence when making PR if the most important stuff is thoroughly tested.

Do you have plans regarding testing?

[amcdnl]

There is a few tests actually - feel free to add more - though I generally sway towards pure function tests over component tests. Feel free to add more!

[Vadorequest]

When are tests being executed? I don't think they're executed on GitHub Actions, how do you detect regressions then?

I believe they should be executed in https://github.com/reaviz/reaflow/blob/master/.github/workflows/build.yml to validate PRs aren't introducing regressions.

They should also be executed in https://github.com/reaviz/reaflow/blob/master/.github/workflows/release.yml to make sure not to publish a release with non-passing tests. What do you think?