Create and render custom ejs templates for tokens

[luisjmontoro]

Is your feature request related to a problem? Please describe. I would like to be able to render the same tokens defined in the yaml files in different ways and also be able to control it.

Describe the solution you'd like I was trying to create different ejs templates for the same tokens (ej. 2 custom templates for the same color tokens) so I can use them in different places.

Any thoughts on this?

Thanks!

[dennisreimann]

Hey Luis, I think I know what you are trying to achieve. We currently need something similar: Our use case is that we have several themes that vary in their use of colors. We thought of having a table that lists the color variables (each var is a row) and has their value (as a color swatch) in a column per theme.

Is this what you are looking for? I‘d like to know about your use case in detail, because this will help me implement our case in a general manner.

I cannot provide a timeframe for this feature, but we need it ourselves, so this is likely to happen with one of the upcoming releases.

[luisjmontoro]

Hello Dennis! I've done something similar to the table you mention working on the tokens.ejs template and it renders nice. But in our concrete case we need to render that table in the documentation pages that talk about color, however, in the color token page (also in the documentation) we would like to render the color swatches in another way. That's why we are trying to create .ejs custom templates.

The idea would be to be able to render two (or more) different templates from the same tokens.yml file.

Another thing that we are trying to do is to render token variables inside a page.md not at the end of the markdown but wherever we need to display it:

---
title: 🔶 Color
tokens: !include /src/uiengine/tokens/colors.js
---

- [Swatches](#swatches)
- [Usage](#usage)

This would be a explanatory text.

1. [UI](#ui)
2. [Brand](#brand)

# Swatches <a id="swatches"></a>
___
## Brand

<%_ if (tokens) { %>
      <%= renderTokens(tokens, 1) _%>
    <%_ } _%>

## UI 

<%_ if (tokens) { %>
      <%= renderTokens(tokens, 1) _%>
    <%_ } _%>

Is this posible?

Thank you!

[dennisreimann]

Is this posible?

Right now it's not, but I'll come up with something :)

I'll get back to you once I start to implement this.

For the time being using a page with a custom template might be an option:

template: custom.ejs
context:
  tokens: !include /src/uiengine/tokens/colors.js

You would need the EJS adapter for that and you would write the "surrounding content" in HTML/EJS, but that would give you a way to do custom stuff like that already.

[luisjmontoro]

Thanks Dennis!

I'm trying to replicate the way you reference the custom template:

---
title: 🔶 Color
template: test.ejs
context:
  tokens: !include /src/uiengine/tokens/colors.js
---

But when I try to build the UIengine, it fails and returns this error:

Error: EJS could not render "/Users/luis/Desktop/Thonet/thonet/src/templates/test.ejs"!

ReferenceError: /Users/luis/Desktop/Thonet/thonet/src/templates/test.ejs:201
    199| <%_ } _%>
    200|
 >> 201| <link href="<%= basePath %>/_assets/styles/uiengine-inject.38be60fb1f1cbb0d970c.css" rel="stylesheet">
    202|
    203| <div class="uie">
    204|   <div class="uie-tokens">

basePath is not defined
    at render (/Users/luis/Desktop/Thonet/thonet/node_modules/@uiengine/core/lib/builder.js:46:11)
    at process._tickCallback (internal/process/next_tick.js:68:7)

The curious thing is that, if I delete that line, the error keeps coming up.

[dennisreimann]

That‘s because the basePath variable is unset. The page context has just the tokens. You are trying to reuse the tokens.ejs from the UI package, right? There might be more unset variables (you have to provide all the variables used in the template via the context), but basePath is most likely /.

[luisjmontoro]

Yes, I thought so, that's why I tried to build it deleting that line (I will use custom styles instead, so that's not a problem), but it keeps returning the error as if the line is still there...

[dennisreimann]

That's because the basePath variable is used multiple times throughout the template.

[luisjmontoro]

I just checked the template and basePath doesn't seem to appear again...

I was also wondering about something you said before and how to do it:

(you have to provide all the variables used in the template via the context)

I'm trying to do this but I don't know exactly how. And it happens the same when I try to reference a file in the yaml opening the template. I've tried doing it the same as you (- <<: !include /src/uiengine/tokens/font-families.js) but it does not work. The build fails as if something is wrong in the yaml.

Thank you for the help, I really appreciate it :)

[dennisreimann]

Hey Luis, sorry that it took me so long to reply. Is this still in the repo and branch we talked about last time? I'd like to take a look.

The build fails as if something is wrong in the yaml.

That might be the case and if so I'd like to find a way to improve the error message to make this more clear.

[luisjmontoro]

Hello Dennis! :) The repo is the same that I shared with you last time :) It's been updated since then. The master branch, however, doesn't have this attempt of referencing more than one js for rendering tokens on a markdown page because it was crashing when I tried to do it as you do in the typography page (- <<: !include /src/uiengine/tokens/font-families.js). I've also redefined all the tokens values to meet our needs, although we would like to be able to create more custom tokens (such as sizes, for example).

Thanks!!

[dennisreimann]

Hey Luis, I fixed the issues and sent a pull request (alfonsomorcuende/thonet#2). The custom template is working now :)

[luisjmontoro]

Thank you so much Dennis, I will take a look at it to fully understand it. :)