Playground

[hexus]

Build a playground page with a YAML input for form definitions.

Would be fine to look a little like this with the form showing on the right.

[hexus]

These were helpful so far

• https://codepen.io/dariusgarza/pen/XwVveJ
• https://stackoverflow.com/a/25098486/1744006

Getting Ace Editor to import was a pain, very antiquated. If only it properly supported ES modules! And brace was last published in 2018! 😩 Either way, it's working nicely.

[hexus]

Here's where to continue: https://github.com/hexus/pragma/blob/dd90eb121c3ad1297b358cef00ec8b6235f23a7c/src/services/FormProcessor.js#L801-L804

Adding and updating fields in the playground works nicely, but they don't get removed because of this optimisation from a while back. Time to do some proper dictionary diffing in updateDictionary().

The main reasons we want to update the dictionary rather than rebuilding from scratch every time:

• Data retention
  • We don't store data in a dedicated property by design, it's stored in field value properties each time new data is given
  • We don't want editing a form to clear all of its data every time we tweak it!

• 7 Performance

  • For simple forms, it isn't a problem, but for complex forms, rebuilding like this can get really slow

[hexus]

Looks like all this needed was field diffing and removal to work! 🎉

Things to do before closing:

• Test with templated fields
• Fix whichever editor isn't visible not updating properly (seems to be the data editor most of the time 🤔)