unexpectedjs/unexpected

The extensible BDD assertion toolkit

Gustav Nikolaj

@gustavnikolaj

I'll see if I can write a more coherent pitch for it :-)

Andreas Lind

@papandreou

@gustavnikolaj, I think I did something like that in the formmail project at One, if that's still around? At least I'm fairly sure that it uses htmlizer and prerenders all the templates in the supported languages.

Gustav Nikolaj

@gustavnikolaj

I will take another look at it for sure - IIRC it’s based on jsdom and using that for traversal and serialization.

Andreas Lind

@papandreou

Ah yeah, it probably doesn't use a full ag-b like pipeline

Gustav Nikolaj

@gustavnikolaj

It proves that it can be done :-) Ideally I would want a spec that can be implemented both for client-side templating (using the DOM), for static analysis and build-systems like ag-b (or just work with normal html) and for the server side as a pug/ejs alternative

I think the jsdom approach makes it too expensive for dynamic templating on the server

Andreas Lind

@papandreou

Yeah, I also have a preference for that templating style (as you might imagine). Jsx is getting all the attention, and is close enough I guess :)

Gustav Nikolaj

@gustavnikolaj

I also want inheritance to work. E.g profile.html extending layout.html

JSX may look like something similar, but I think it’s almost as polar of an opposite that you can find? :-) It’s not templating, just code?

Andreas Lind

@papandreou

I mean in the sense that you're working with elements as a first class citizen so it doesn't boil down to string concatenation

But yeah, in terms of sending the templates themselves through a build pipeline, you're out of luck

Gustav Nikolaj

@gustavnikolaj

Right, gotcha :)

Gustav Nikolaj

@gustavnikolaj

@papandreou @sunesimonsen I found some prior art in the html templating space that I was exploring. TAL / Template Attribute Language https://pagetemplates.readthedocs.io/en/latest/introduction.html

Andreas Lind

@papandreou

Looks a bit like XSLT, which is kinda also in that space, but probably more than you bargained for :)

Gustav Nikolaj

@gustavnikolaj

hehe, yeah :)

It's interesting to me that there's so little in terms of earlier attempts in this area.

Maybe it's because you eventually just end up realizing that you're slowly but surely reimplementing a worse version of XSLT

Sune Simonsen

@sunesimonsen

HAHA

Andreas Lind

@papandreou

"When you find yourself in a hole..."

Gustav Nikolaj

@gustavnikolaj

I think I can settle for something a bit simpler. knockout-like templates without data-binding, and with a concept of a template extending something else.

Andreas Lind

@papandreou

Sounds a bit like knockout (sans live binding) but with the custom element support?

Gustav Nikolaj

@gustavnikolaj

hmm.. No the other way around I think

<link rel="template-extends" href="my-parent-template.html">

<h1>My page content</h1>

Andreas Lind

@papandreou

Right, but what does extending the other thing mean exactly? There must be some sort of slot concept? That's why I thought of the custom element thing.

Gustav Nikolaj

@gustavnikolaj

True, I actually used the <slot> tag to mark the spot in one of my demos :)

Andreas Lind

@papandreou

:smirk_cat:

Gustav Nikolaj

@gustavnikolaj

custom elements are nice for components where the entry point needs to use some repeating functionality, but doesn't really work for the extending-a-base-scenario

Andreas Lind

@papandreou

Why not?

Gustav Nikolaj

@gustavnikolaj

You could make an app-shell like component I suppose

but how would you deal with things outside that, which ought to be part of the parent template as well?

just make the app-shell component the thing which emitted the doctype as well as html, body and head tags?

Andreas Lind

@papandreou

What if a page needed to contain a header and a footer?

page.html

<template>
  <header>The header</header>
  <slot />
  <footer>The footer</footer>
</template>

And then using it from a page:

index.html

<link rel="page" href="page.html">
<page>
  <h1>My page content</h1>
</page>

I guess you also need the ability to pass in more complex stuff via attributes.

... But yeah, it's already converging dangerously towards XSLT :worried:

Gustav Nikolaj

@gustavnikolaj

hehe

I don't know how complex it needs to be. We got pretty far with knockout templates

Andreas Lind

@papandreou

Yeah, but the slotting thing was accomplished with code

Gustav Nikolaj

@gustavnikolaj

yeah

If you have a format that you can actually parse as html and work with in a tool like assetgraph, you can do a lot of the things automatically. Instead of having script-loader helpers, you can just pull all script-tags you find to the bottom of the body tag, and lift any link tags you find into the head

I am not scared away, but I think I need to understand XSLT better than I do right now, so I know to stop before I have made a reimplementation :D

Andreas Lind

@papandreou

Good luck! XSLT is a bit of a rabbit hole.

Sune Simonsen

@sunesimonsen

You don't really want XSLT, that is about writing a transformation from one XML structure to another XML structure in written XML :joy:

Andreas Lind

@papandreou

Isn't that what we're talking about, except HTML?

Sune Simonsen

@sunesimonsen

No it seems like @gustavnikolaj want the template to contain the directives. XSLT is about having a document and process instructions separately.

So you have your stylesheet in one file, that can transform XML documents of a certain shape into new XML documents.

Andreas Lind

@papandreou

Yeah, it's a bit more general, but this ticks at least two of those boxes because the templating syntax and desired output format are both HTML.

Sune Simonsen

@sunesimonsen

I think that is a little bit differently. You can think of the XSLT as a perl script that transforms XML documents, the fact that you write it in XML is a detail.

Gustav Nikolaj

@gustavnikolaj

From the examples that I looked at it seems that it's basically a selector for what portion of the resulting document you want to fill in, plus a template and references to the values you want to slot into your template

But you're right, I don't want the instructions to be lifted out of the document. I want an experience sort of like EJS or Knockout :)

Sune Simonsen

@sunesimonsen

:+1:

Where communities thrive

People

Repo info

Activity