vshesh / glue

plain text syntax for plain text syntax
http://glue.surge.sh
0 stars 0 forks source link

Render the first component element #16

Closed vshesh closed 7 years ago

vshesh commented 7 years ago

Ok, the first example of a component that benefits from a view library is here (react, mithril). It's an annotated code element. It can be written with raw HTML/JS if you're nuts, but in this case we end up with lots of boilerplate code in the form of repeated event calls.

In this case, the "HTML" returned by the server would be:

['AnnotatedCode', {code: text, annotations: a}]

code and annotations are taken from the code block. If given a code block like:

---code python
def f(x):
  # comment of some kind
  return x + 1
...

And I know the comment start characters (# in this case), so I can fold each comment onto the next line and make it into an annotation so it renders a block of code with hoverable comments that appear below.

This makes it much easier to follow along with the code example rather than looking at comments interspersed with code, especially if there's a longer discussion that can distract from the flow of the code.

vshesh commented 7 years ago

In order to implement a view component library based element, there is much work to do! Here are the implementations of this idea in increasing degrees of fidelity:

  1. Write a component that renders a simple react component (just the HTML above) and manually include assets in order to make it work with the server demo #11
  2. Allow asset files to be included with an element, and have a command in the glue CLI that goes something like glue assets [file1] [file2] and spits out all required assets for the blocks in the files. #8

Basically, it's an amalgamation of what was previously in three different issues. They all go together though, and represent the next feature set for the glue project.