Close to giving up getting started

[lukepuplett]

I can't get this little library to work. I'm new to JS/TS and Deno, but even so, there's not much I can get wrong! I got the renderFileAsync() command from a blog; it's not mentioned in the documentation. There's very little in the docs, I don't know if that's because everyone is used the lib that it's based upon?!

Anyway, these are my two attempts and their results. Deno with oak:

async function handleGetLoginGoogleViaEta(context: Context) {
  const viewData = { title: "Squashed | Login", loginProviderName: "Google" };

  const html = await eta.renderFileAsync("login-oauth-google.eta", viewData);

  // for some reason renderFileAsync can return a void but the void
  // isn't for when there's an error (it throws), so I don't know
  // what it commnunicates, means I have to narrow to string:

  if (typeof html === "string") {
    context.response.body = html;
  }
}

// login-oauth-google.eta
//
<% layout("_htmlpage") %>

<h1>
    Login with <% it.loginProviderName %>
</h1>

Result:

Login with

The result is "Login with" blank. The viewData object apparently doesn't become it.

My next try was to use render() but this doesn't work at all.

async function handleGetLoginGoogleViaEta(context: Context) {
  const viewData = { title: "Squashed | Login", loginProviderName: "Google" };
  const template = "<%~ includeFile('login-oauth-google.eta', viewData) %>";
  const html = eta.render(template, viewData);

  if (typeof html === "string") {
    context.response.body = html;
  }
}

Result:

[uncaught application error]: ReferenceError - viewData is not defined

I'm probably doing something obviously dumb.

[gurgunday]

Hey! Your first example is nearly correct. The issue is that Eta doesn't know where the files are (even though it tries a bunch of paths). You can either configure Eta beforehand using eta.configure() or supply a config object when calling renderFile. Take note that renderFile returns void IF you supply a callback function, if not it always returns a promise that resolves as the HTML (string), so no need for a type check.

This should work (assuming the login-oauth-google.eta file is in the same folder as index.js):

async function handleGetLoginGoogleViaEta(context) {
  const viewData = { title: "Squashed | Login", loginProviderName: "Google" };

  const html = await eta.renderFile("log.eta", viewData, {
    views: './',
  });

  console.log(html)
}

I prefer to configure it beforehand:

eta.configure({
  views: './',
})

async function handleGetLoginGoogleViaEta(context) {
  const viewData = { title: "Squashed | Login", loginProviderName: "Google" };

  const html = await eta.renderFileAsync("log.eta", viewData);

  console.log(html)
}

Also, to print out something, you need to use the output tag-type <%= %> instead of <% %>, which only evaluates the result.

Example:

<h1>
    Login with <%= it.loginProviderName %>
</h1>

[lukepuplett]

Hi and thanks for your time helping me.

I do have the view path configured in my main.ts and it does render HTML. The strange thing is that the viewData is ignored. In the first of my examples, it emits Login with to the brower, missing the value from the data passed in, it.loginProviderName.

The second attempt using render() thinks viewData is not defined and fails to render at all.

Thanks!

[gurgunday]

In your first example, viewData is not ignored, just not printed.

There needs to be an equals sign as well to print out the value of a variable:
<%= it.loginProviderName %> instead of <% it.loginProviderName %>.

[lukepuplett]

Bingo! I'm laughing out loud, mixed with relief. Now I see it in the docs... ugh. Thank you!