Filters in MarkoJS

[slidenerd]

Description

Filters let you add other languages inside marko templates. Idea is borrowed directly from Pug Filters https://pugjs.org/language/filters.html

Why

If I want to link to a dynamically generated app.js file with a chunkhash which is the result of a Webpack build step, currently it doesnt seem possible to do so

Possible Implementation & Open Questions

The example shown at the bottom of the PugJS documentation seems to be a solid case

[mlrawlings]

I think components give you the same level of expressiveness.

For the custom filter example, you could write a component like this

<if(input.addStart)Start</if>
<${input.renderBody}/>
<if(input.addEnd)End</if>

and usage:

<my-component add-start=true add-end=false>
  Component
  Body
</my-component>

For the Markdown example, you'd need to use Marko's compiler api. You can tell a component to parse its body not as HTML, but as text instead. Then you can pass that text to a markdown compiler. We have a markdown component in the online playground.

<app-markdown>
  ## This is Markdown

  ---

  - A
  - B
  - C
</app-markdown>

---

I want to link to a dynamically generated app.js file with a chunkhash which is the result of a Webpack build step, currently it doesnt seem possible to do so

I'm not sure I'm understanding you correctly, but it sound like you want to inline the contents of the app.js into a script tag? If so, something like this would work (assuming this component is only rendered on the server):

import { readFileSync } from "fs";

<script>
  $!{readFileSync(`./path/to/app.${input.hash}.js`)}
</script>

Though I wouldn't recommend inlining a bundle into the HTML like this. Have you checked out the @marko/webpack plugin? It handles getting your assets into the html for you.