groundwater / GraffJS

2 stars 0 forks source link

"Node comment" syntax #1

Open chrisdickinson opened 3 years ago

chrisdickinson commented 3 years ago

Hi! This is an exciting project!

Reading over the docs, I reacted to the block comment syntax – it'd be nice to be able to quickly "comment out" a given node using a sigil, sort of how KDL does it with "slashdash" comments.

It might look something like this:

      ┌──────────┐          ┌────────┐   ┌────────┐    ┌────────────┐    ┌─────────────┐
      │          │          │#       │   │        │    │            │    │             │
─────►│ []       ├─────────►│ .push  0──►│ .push  0───►│ .join(" ") ├───►│ console.log │
      │          │          │        │   │        │    │            │    │             │
      └──────────┘          └──┬─────┘   └───┬────┘    └────────────┘    └─────────────┘
                               │             │
                               │             │
      ┌──────────┐             │             │
      │          │             │             │
      │ "Hello"  │             │             │
      │          │◄────────────┘             │
      └──────────┘                           │
                                             │
                                             │
      ┌──────────┐                           │
      │          │                           │
      │ "World"  │◄──────────────────────────┘
      │          │
      └──────────┘

Where the # sigil in the top left hand of a node indicates that it is a no-op, & only the output trace should be followed.

groundwater commented 3 years ago

Generalizing your idea, I quite like the idea of a developer-focused sigils.

I'm not sure the best place for them. It would be nice to easily avoid conflicting with existing content. Assuming only a single sigil at a time, the North-West corner makes the most sense to me.

e.g.

      ┌──────────┐          #────────┐   ┌────────┐    ┌────────────┐    ┌─────────────┐
      │          │          │        │   │        │    │            │    │             │
─────►│ []       ├─────────►│ .push  0──►│ .push  0───►│ .join(" ") ├───►│ console.log │
      │          │          │        │   │        │    │            │    │             │
      └──────────┘          └──┬─────┘   └───┬────┘    └────────────┘    └─────────────┘
groundwater commented 3 years ago

After I typed that, I think yours is more readable.