Paul's notes from attempting to write a new language module

[pcardune]

I started working on a language module for a low level language I'm writing. Here are some notes about things that were confusing or complicated or not possible that could be addressed eventually:

1. DropTarget usage is confusing: It seems like magic that all I have to do is specify a field prop and DropTarget will automatically figure out where to insert the dropped node. Well, the magic doesn't work.

   • Specifying a field that is not an array causes an error. In my language I have let statements that take an optional initializer expression. So both let x; and let x = <expression>; are valid. In the ast I represent this as a LetStatement node with two child nodes: "symbol", and "expression". If the source code has let x;, then I want codemirror-blocks to display a DropTarget that fills the "expression" slot. I think this could be supported pretty easily
   • Slightly complex DOM results in the wrong insertion index being calculated.. I have a block node with a "statements" field containing an array of child nodes. The only way I could <DropTarget field="statements"> to insert at the right place in the "statements" array was by making it an immediate sibling of a node from the array:

     <div>
       {this.statements.map((statement, index) => (
         <div key={index}>
           <DropTarget field="statements"/>
           {this.reactElement(statement)}
         </div>
       ))}
     </div>

     But what if I have a more complicated UI and need to put the DropTarget somewhere else? This could be fixed by having DropTarget take an optional insertionIndex prop that specifies explicitly where in the "statements" array the dropped node should be inserted.

2. CSS is annoying: When I use CodeMirrorBlocks right out of the box, none of the stylesheets are included. This used to be pretty standard behavior for most UI libraries, but I think people are moving more and more to css in js where styling is baked into the code. I want to be able to have an empty page with a single snippet of js:

   const cmb = CodeMirrorBlocks(container, myLang);

   and get something that looks halfway decent.

3. Can't render different dom when a node has focus: I'd like to conditionally render different UI depending on the focus/drag/hover/editing state. For example, I have an ast node for variable names. When those nodes have focus I'd like to display a drop down that shows the list of variables names that are in scope (according to the compiler). AFAICT, the focus state of a node can only be accessed through css classes. It would be nice to expose a limited set of readonly data from the redux store to the ASTNode.render components without them having to know about redux.

4. API for creating new nodes is rather verbose: It's kind of painful to create a bunch of classes for each of the nodes in my AST when I already have data structures for each of those nodes with all the relevant information... but which aren't subclasses of ASTNode and don't have render() or pretty() functions.

5. pretty() forces you to use pretty-fast-pretty-printer. This is fine if you don't already have a pretty printer for your language, but is annoying if you do. Maybe this is just as simple as changing the interface so that pretty() can also just return a string?

6. ASTNode validator is annoying: Optional fields should accept undefined in addition to null. I should be able to store other properties that are not in the spec on my ASTNode without the validator complaining.

I'll append to this list as I come across things.