Produce HTML from S-Expressions

by lelanthran • 3 years ago

61 61 3 years ago

sph3• 3 years ago

    (h1 :disabled Hello world!)
    (div :class="alert"
          So long, and (b thanks) for all the (em fish))

I hate that syntax for attributes.

:class="alert" is strictly worse than ((class . "alert")) or any other variation that actually leverages s-expressions instead of merging key and value into the same symbol. Ew.

Not a fan of the bare words instead of strings either, which means this cannot be naively evaluated by a Lisp.

I wouldn't say this is producing html from s-exps, rather that it is vaguely inspired by them.

KRAKRISMOTT• 3 years ago

Like this amirite

https://github.com/weavejester/hiccup

xemoka• 3 years ago

The thi.ng umbrella has a hiccup variant for JS that looks pretty neat too: https://thi.ng/hiccup

lelanthran15• 3 years ago

:class="alert" is strictly worse than ((class . "alert")) or any other variation that actually leverages s-expressions instead of merging key and value into the same symbol. Ew.

I hear you, but I wasn't aiming for leveraging the power of macros. Using `((class . "alert"))` does not provide any benefits over :class="alert".

Not a fan of the bare words instead of strings either, which means this cannot be naively evaluated by a Lisp.

I traded off ergonomics against "Evaluation by a Lisp processor".Instead of

     (div "My first " (b "hello") (em " world"))

I'd rather do

     (div My first (b hello) (em world))

Thank you for your input.

sph3• 3 years ago

Using `((class . "alert"))` does not provide any benefits over :class="alert".

Of course it does. It is a s-exp, like everything else in this language, so it's just another list you can map, apply or otherwise transform. The keyword approach instead requires a weird incantation of

    (string-trim (cadr (string-split (keyword->string :class="alert") ?=)) ?")

to extract the value from the attribute. For what benefit? If the goal is using s-exps, why not use s-exps for everything?

fouc3• 3 years ago

This might be okay too?

  (div (class "alert") So long, and (b thanks) for all the (em fish))

  (div {class "alert"} So long, and (b thanks) for all the (em fish))

kazinator4• 3 years ago

If My and first just stand for themselves, you're not interpolating variables; where is the templating?

Also, what if you don't want a space between the bold hello and emphasized world? Or between first and <b>hello</b>?

messe• 3 years ago

Not a fan of the bare words instead of strings either

It is consistent with HTML however, especially the fact that both collapse whitespace.

giraffe_lady• 3 years ago

Pollen's tagged xexp is probably the most sophisticated approach to this I've seen. Though hiccup is about as good and easier to work with. https://docs.racket-lang.org/txexpr/index.html

Zambyte2• 3 years ago

Not a fan of the bare words instead of strings either, which means this cannot be naively evaluated by a Lisp.

Most Lisps (all that I know of) have a way to convert symbols to strings. The hard part is resolving the ambiguity between what should be text, and what should be treated as an HTML node. Like, what if I wanted to actually write the string "(b thanks)" on a page? R7RS could probably do this with the pipe identifier syntax[0], but I think R7RS is fairly unique in its capability for identifiers (and thus symbols) with such a wide range of supported characters.

[0] https://standards.scheme.org/corrected-r7rs/r7rs-Z-H-4.html#...

sph3• 3 years ago

Bare words are fine until you have a variable with the same name as your bare word, so you need additional syntax to determine if you're referencing a variable, or it is just text.

ptx• 3 years ago

With this merged attribute syntax, since each key-value combination is a separate symbol and since symbols are interned, doesn't this mean that all the attribute values (and not just the keys) end up interned?

Do Lisp implementations usually garbage-collect interned symbols when they're no longer used?

kazinator4• 3 years ago

Firstly, obviously yes for un-interned.

TXR Lisp:

  This is the TXR Lisp interactive listener of TXR 291.
  Quit with :quit or Ctrl-D on an empty line. Ctrl-X ? for cheatsheet.
  I'm confused; is this piano recital Rimsky-Korsakov or Wernicke–Korsakoff?
  1> (progn [finalize (gensym "foo-") prinl] nil)
  nil
  2> (sys:gc)
  #:foo-0012
  t
  3> (sys:gc)
  t

We make a gensym whose name starts with foo-. We register a GC finalizer for it which is the prinl function (print, with newline).

Then when we manually invoke GC, it gets collected; we see the print.

Internet symbols cannot be collected, normally, because they are always used: they are registered in their package.

TXR Lisp has weak packages, though. A weak package will purge a symbol that is not reachable other than through the package.

  1> (make-package "abc" t)  ;; t argument here means weak
  #<package: abc>
  2> (progn [finalize (intern "xyz" *1) prinl] nil)
  nil
  3> (sys:gc)
  abc:xyz
  t
  4> (package-symbols *1)
  nil
  5>

Don't know if other Lisp people thunk of this one, but there it is.

I don't think I exposed this weak property through the defpackage macro. It's intended for specific scenarios, like reading data in the context of a package.

fabiofzero• 3 years ago

Basically Haml then.

iLemming• 3 years ago

Haml is not homoiconic. It's like saying "the flask is basically a teapot". Sure, they both can serve similar purposes, but categorically they are very different things. They look different, they are usually made of different materials, and they are used very differently. So, no, it's not "Basically Haml"

brabel• 3 years ago

There are so many of these already: https://cliki.net/html%20generator

And still I can't find one that I like (which is why I also wrote one myself :D).

fouc3• 3 years ago

Reminds me of hyperscript like in https://mithril.js.org

  m("h1", {class: "title"}, "My first app")

efortis• 3 years ago

Yep. Also it’s worth mentioning that that’s the signature of React.createElement

Here’s a simplified implementation: https://github.com/uxtely/js-utils/tree/main/react-create-el...

bjoli2• 3 years ago

I your aready using a scheme you can use SXML. The tooling makes XML fun.

mschaef2• 3 years ago

The tooling makes XML fun.

High praise indeed.

bjoli2• 3 years ago

Well, it is because you can do most transformations using a tree fold. You get the speed and flexibility of SAX but with the nice interface of DOM parsing.

Apart from scheme, I have only done XML things in Python and C#, and that was a less than stellar experience.

junon2• 3 years ago

I actually really love this. I much prefer this over HTML syntax. Add a way to do custom tags and imports and this becomes a very, very neat static site generation tool.

lelanthran15• 3 years ago

Add a way to do custom tags

I don't know what that means - it currently uses the first element of the list as the tagname, so you can use whatever tags you want to.

and imports and this becomes a very, very neat static site generation tool.

I've toyed with the idea of adding more functionality (like imports, environment variables, conditionals, etc).

Not too sure I want to go in that direction.

junon2• 3 years ago

The ability to create tag templates basically. You'd define tags that you could parameterize using attributes, and then within the custom tag "body" would be more tags definitions.

If the parser comes across a tag it doesn't know, it emits it verbatim. If it comes across a tag that is defined as a custom tag, then it replaces the tag expression with the expanded tag template body ("expanded" here meaning the parameters are substituted).

Similar to JSX, make an implicit parameter called "children" that holds all child elements, and then allow the templates to refer to attributes with a special expression (e.g. `(attr children)` or something, or maybe just `(:children)` if that doesn't break syntax rules).

datastack• 3 years ago

Nice, thanks for sharing. Curious what your motivation was for making it. Perhaps include a "why" at the start of the repo. As evidenced by some comments, depending on whether the goal was to write HTML with a lisp compatible syntax, vs, a more concise but simple xml alternative, it creates different expectations. Personally I'm just interested from a parser/ compiler perspective.

lelanthran15• 3 years ago

Curious what your motivation was for making it. Perhaps include a "why" at the start of the repo. As evidenced by some comments, depending on whether the goal was to write HTML with a lisp compatible syntax, vs, a more concise but simple xml alternative, it creates different expectations.

You are quite correct, my goal appeared to be "Lisp interpreted HTML", my actual goal is "Write HTML tag trees easier".

leumassuehtam• 3 years ago

Shameless plug of a similar idea to embed lisp into LaTeX files.

https://github.com/keyehzy/lispylatex

neilv• 3 years ago

The Scheme community seemed to standardize on Oleg Kiselyov's SXML format for XML and HTML: https://en.wikipedia.org/wiki/SXML

The initial driver for adoption was that Oleg made an excellent XML parser (SSAX) that used SXML. Then a bunch of people (including me) built new tools to work with SXML, and changed existing tools to use it.

Later, I realized that SXML permitting unnecessary list nesting, which initially seemed sloppy and inefficient, actually has a very useful efficiency property, once you're using immutable lists: you can compose larger XML with a small allocation and no mutation like:

    (list some-huge-tree another-huge-tree)

Racket-specific starting point: https://docs.racket-lang.org/sxml-intro/index.html

pharmakom• 3 years ago

Is there a standard format for a-expressions?

I want to use them but I cannot find a spec like for JSON

jll29• 3 years ago

If one uses the XML tree of the XHTML as the primary internal representation instead of S-expressions, no conversion is needed at all, as XHTML can be viewed in the browser simply by associating a CSS style sheet via "rel".

Nothing is a faster converter than avoiding a conversion step altogether... but that is not why I did it; I used that technique in my Ph.D. thesis back in 2007 [1,2] to avoid directories full with hundreds of auxiliary files (xml/ html.tmp/ ..), which may be confusing to manage, slow to copy, and eventually lead to the file system running out of i-nodes.

EDIT:

[1] https://www.sciencedirect.com/science/article/abs/pii/S01989...

[2] pp. 132-134 in https://era.ed.ac.uk/bitstream/handle/1842/1849/leidner-2007...

pgt• 3 years ago

Hiccup syntax for Clojure uses hash maps (curly braces) for attrs, e.g. `{:style {:background "red" :margin "1em"}}`

See Reagent which uses Hiccup syntax: https://reagent-project.github.io/

    (defn simple-component []
      [:div
       [:p "I am a component!"]
       [:p.someclass
        "I have " [:strong "bold"]
        [:span {:style {:color "red"}} " and red "] "text."]])

thom• 3 years ago

Also just because it’s not shown here, IDs can be declared with tag#id syntax.

bmacho• 3 years ago

A more interactive (but less examples) showcase : https://escherize.com/works/hiccup.space/

tannhaeuser• 3 years ago

FYI in traditional SGML DTD-driven HTML parsing, "disabled" in

   <div disabled>

represents the attribute value rather than the attribute name. The value has to be declared in an enumeration and must be different from all other enumerated values (of other elements) for the parser to infer the attribute and emit canonical markup such as

   <div disabled="disabled">

In HTML, it just so happens that the attribute name in what the WHATWG HTML spec calls a "Boolean attribute" is always the same as the single allowed value. However, WHATWG managed to break that in the latest spec, allowing "until-found" as additional value for the "hidden" attribute [1].

[1] https://sgmljs.net/docs/html230116.html

jgalt212• 3 years ago

If you use js-based hiccup instead of JSX, SPA frameworks would not need a compile step.

lelanthran15• 3 years ago

I'd like to thank everyone for their feedback and criticisms; I've received some excellent suggestions for improvement.

I've tried to engage with everyone - I apologise to those I didn't engage with or answer adequately.

Produce HTML from S-Expressions

Related Stories