search

11ty / eleventy-plugin-webc

Adds support for WebC *.webc files to Eleventy
https://www.11ty.dev/docs/languages/webc/
120 stars 10 forks source link

Issues using WebC with nunjucks #24

Open mirisuzanne opened 2 years ago

mirisuzanne commented 2 years ago

I tried a few different patterns, with or without this:

<a :href="url('/who/')" @html="site.author"></a>
<a :href="this.url('/who/')" @html="site.author"></a>

(I recognize that the url) function isn't doing much here. I mainly just wanted to try built-in functions to see if they would work better. I got the same results with slugify() as well)

also in @html using my own md function:

<template @html="md(colophon)"></template>
<template @html="this.md(colophon)"></template>

And with nunjucks inside webc:type="11ty" 11ty:type="njk":

<template webc:type="11ty" 11ty:type="njk">
  {{ colophon | md | safe }}
</template>

In all these cases, the server fails to start:

webC syntax, `url()` helper ``` [11ty] Problem writing Eleventy templates: (more in DEBUG output) [11ty] 1. Having trouble writing to "_site/books/greenmud/index.html" from "./content/books/greenmud.md" (via EleventyTemplateError) [11ty] 2. url is not a function (via TypeError) [11ty] [11ty] Original error stack trace: evalmachine.:1 [11ty] url('/who/') [11ty] ^ [11ty] [11ty] TypeError: url is not a function [11ty] at evalmachine.:1:1 [11ty] at Script.runInContext (node:vm:139:12) [11ty] at Script.runInNewContext (node:vm:144:17) [11ty] at Object.runInNewContext (node:vm:298:38) [11ty] at Function.evaluateAttribute (file:///Users/mia/Sites/mia/node_modules/@11ty/webc/src/moduleScript.js:27:25) [11ty] at Function.normalizeAttribute (file:///Users/mia/Sites/mia/node_modules/@11ty/webc/src/attributeSerializer.js:67:39) [11ty] at Function.getString (file:///Users/mia/Sites/mia/node_modules/@11ty/webc/src/attributeSerializer.js:101:50) [11ty] at AstSerializer.renderStartTag (file:///Users/mia/Sites/mia/node_modules/@11ty/webc/src/ast.js:681:56) [11ty] at AstSerializer.compileNode (file:///Users/mia/Sites/mia/node_modules/@11ty/webc/src/ast.js:1115:56) [11ty] at AstSerializer.getChildContent (file:///Users/mia/Sites/mia/node_modules/@11ty/webc/src/ast.js:579:40) [11ty] Benchmark 15793ms 80% 472× (Configuration) "img" Nunjucks Filter [11ty] Wrote 0 files in 19.40 seconds (v2.0.0-canary.16) ```
njk-in-webC syntax, `date()` helper ``` [11ty] Problem writing Eleventy templates: (more in DEBUG output) [11ty] 1. Having trouble writing to "_site/tags/all/index.html" from "./content/tags/detail.njk" (via EleventyTemplateError) [11ty] 2. (unknown path) [11ty] Error: filter not found: md (via Template render error) [11ty] [11ty] Original error stack trace: Template render error: (unknown path) [11ty] Error: filter not found: md [11ty] at Object._prettifyError (/Users/mia/Sites/mia/node_modules/nunjucks/src/lib.js:36:11) [11ty] at /Users/mia/Sites/mia/node_modules/nunjucks/src/environment.js:563:19 [11ty] at Template.root [as rootRenderFunc] (eval at _compile (/Users/mia/Sites/mia/node_modules/nunjucks/src/environment.js:633:18), :21:3) [11ty] at Template.render (/Users/mia/Sites/mia/node_modules/nunjucks/src/environment.js:552:10) [11ty] at /Users/mia/Sites/mia/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:416:14 [11ty] at new Promise () [11ty] at /Users/mia/Sites/mia/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:415:14 [11ty] at Object.renderShortcodeFn (/Users/mia/Sites/mia/node_modules/@11ty/eleventy/src/Plugins/RenderPlugin.js:113:10) [11ty] at RenderManager.render (/Users/mia/Sites/mia/node_modules/@11ty/eleventy/src/Plugins/RenderPlugin.js:417:30) [11ty] at processTicksAndRejections (node:internal/process/task_queues:96:5) [11ty] Benchmark 15638ms 81% 472× (Configuration) "img" Nunjucks Filter [11ty] Wrote 0 files in 19.00 seconds (v2.0.0-canary.16) ```

In some cases, if the server was already running, I could get the plain-webC syntax to work - but still throw errors. In the terminal I would see the same error as above, but the output would be transformed. That was especially noticeable with slugify().

I also had issues with shortcodes, I assume related to #16

zachleat commented 2 years ago

Hmmmmmm, I’m having trouble reproducing this one—can you provide any additional context?

image

I see you’re using the markdown input files—does that mean you’re using the transform method?

mirisuzanne commented 2 years ago

I see you’re using the markdown input files—does that mean you’re using the transform method?

I don't know what this means, so maybe?

For context, I'm playing with this on my personal site (mirisuzanne/mia) which currently uses markdown & nunjucks for everything. I started by trying to convert some of the site/footer includes. Initially I was using the render plugin and nunjucks shortcode, but when I started running into errors, I created a new webc base layout that was only rendering the footer. Overall, this would be a helpful thing to cover that I don't see much in existing demos/docs - how to handle migrating from (or integrating with) existing template languages. (The lack of loops in webc makes it especially hard to migrate entirely at this point)

I can try again this weekend, and push a branch with a reduced test case, if that would be useful.

zachleat commented 2 years ago

https://www.11ty.dev/docs/languages/webc/#post-process-html-output-as-webc

I created a new webc base layout that was only rendering the footer

This gives more clarity—though a WebC layout file still works for me. Are you saying that the WebC layout file worked but the Render plugin did not?

(If so…) this might be a duplicate of #16

mirisuzanne commented 2 years ago

I was getting these errors using both the render plugin and also the webC layout. I'll take a look again this weekend, and get you a reduced test case if I can.

I was not using a post-processing transform.

mirisuzanne commented 2 years ago

Ok, as discussed in person:

I've attempted with two different layout files. One is webc:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>WebC Example</title>
  </head>
  <body>
    <main @html="content"></main>
    <footer-test>hello</footer-test>
  </body>
</html>

The other is nunjucks:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>hello test</title>
</head>
<body>
  <main>
    {{ content | safe }}
  </main>

  {% renderTemplate 'webc' %}
    <footer-test>hello</footer-test>
  {% endrenderTemplate %}
</body>
</html>

Both are loading the footer-test component:

<a :href="url('/who/')">link test</a>

<footer webc:type="11ty" 11ty:type="njk" webc:keep>
  {% include "site/author.njk" %}

  <a href="{{ '/who/' | url }}">link test</a>

  <slot>default content</slot>

  <div class="colophon">
    {%- set year = null | date('year') -%}
    {{ colophon | replace('@year@', year) | md | safe }}
  </div>
</footer>

(I added those two link tests just to confirm that 1) global helpers are working, and 2) webc is compiling outside the nunjucks block.)

In both cases, the output HTML from the footer-test component is:

  <a href="/who/">link test</a>

<footer 11ty:type="njk">
  {% include "site/author.njk" %}

  <a href="{{ '/who/' | url }}">link test</a>

  hello

  <div class="colophon">
    {%- set year = null | date('year') -%}
    {{ colophon | replace('@year@', year) | md | safe }}
  </div>
</footer>
</body>
</html>
zachleat commented 1 year ago

Woof, I found some HEFTY bugs with webc:type="11ty" in #16, for which the fix is shipping with Eleventy WebC v0.7.0.

I’d hold off here until that is released!

zachleat commented 1 year ago

It is released!

Zearin commented 1 year ago

I’m trying to learn WebC by converting some of my existing Pug-based projects, and I’m having a rough time. :-/ I stumbled on this thread while looking for help.

@mirisuzanne:

I have the following at the time of this writing:

mirisuzanne commented 1 year ago

Things have gone much better for me on a site I built from scratch with WebC and Nunjucks. It is also using the latest versions. I haven't tried porting my old site again, which is where I ran into this error.