POC with Next.js and feedback

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 https://github.com/reaviz/reaflow/pull/69
  • Issue: https://github.com/reaviz/reaflow/issues/53
• Changing the Undo/Redo API (expose more internal variables + option to disable keyboard shortcuts)
  • https://github.com/reaviz/reaflow/issues/60
• ✅ Changing the Edge/Ports component API (adding children) - 🎉 PR https://github.com/reaviz/reaflow/pull/76
  • https://github.com/reaviz/reaflow/issues/67

Documentation:

• ✅ PR for documentation (README) - 🎉 PR https://github.com/reaviz/reaflow/pull/71
  • Next.js support
  • framer-motion peer-dependency, etc.
  • Community examples (https://github.com/Vadorequest/poc-nextjs-reaflow)
  • linking react/react-dom https://github.com/facebook/react/issues/14257#issuecomment-595183610
• ✅ PR for documentation (Examples) - 🎉 PR https://github.com/reaviz/reaflow/pull/72
  • Advanced utilities https://github.com/reaviz/reaflow/issues/47#issuecomment-775919579
  • See https://github.com/reaviz/reaflow/issues/42
• ✅ PR for advanced explanations regarding foreignObject and its usage and limitations - 🎉 PR https://github.com/reaviz/reaflow/pull/74
  • Needs more discussion, unclear what should be done atm. (FAQ?)
  • See https://github.com/reaviz/reaflow/issues/45
  • See https://github.com/reaviz/reaflow/discussions/34
  • See https://github.com/reaviz/reaflow/issues/50
  • See https://github.com/reaviz/reaflow/issues/44
• ✅ PR for documentation about using immutable objects when using setState - 🎉 PR https://github.com/reaviz/reaflow/pull/73
  • https://github.com/reaviz/reaflow/issues/43
• ✍️ PR about ELK FAQ, tricks and limitations (README?) - 🎉 PR https://github.com/reaviz/reaflow/pull/75
  • https://github.com/reaviz/reaflow/issues/4
  • https://github.com/kieler/elkjs/issues/100
  • https://github.com/kieler/elkjs/issues/123

Bug fixes:

• ✅ TypeScript types (wrong types and inconsistent naming) - 🎉 PR: https://github.com/reaviz/reaflow/pull/63

[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!

[amcdnl]

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