new filters

[oscarotero]

There are some filters that I'd like to add to lume:

• inline: to inline content in the html (css, javascript, svg, etc). Example:

<style>
    {{ "/css/my-styles.css" | inline | safe }}
</style>

This will return the content of the css file.

• css: The css plugin could register the css filter, so we can not only inline css but also transform it:

<style>
    {{ "/css/my-styles.css" | inline | css | safe }}
</style>

• bundle: We can do the same with the bundler plugin, to transform javascript/typescript.
• svg: We can do the same with the svg plugin, to transform svg.

[probins]

by 'bundler plugin', do you mean having a plugin to do deno bundle? swc, on which Deno is built, is working on implementing a port for Terser to add to this. I'm using denopack, which uses the browser version of Rollup/Terser, for bundling/minifying. Their roadmap mentions adding 'static generation', so perhaps there's scope for working together?

[oscarotero]

The idea is that existing processors like css (which uses postcss) or svg (which uses svgo) can be used also as template filters, to transform inline sources.

The bundle processor uses the built-in Deno.bundle() (see here: https://github.com/lumeland/lume/blob/master/plugins/bundler.js).

Any other bundler like denopack can be used (it's really easy to create more plugins for Lume). I'll take a look to Denopack.
Thanks!

[probins]

ok. Maybe an example in the docs of how to create a plugin? There's a couple of issues with Denopack, but basically it works well. I'll look into creating a Terser plugin, which would be useful for minifying js without bundling.

I'd suggest standardising the docs to use the same terms throughout. For example, the home page talks of "transformers", but I don't think this word is used anywhere else. Does this mean both plugins and filters? https://lumeland.github.io/creating-pages/filters/ says, under md, "It's installed by the markdown plugin", which is correct, but at the top it says "New plugins must be registered" which I think should be 'filters'.

[oscarotero]

Yes, right. "New plugins must be registered" is a typo, it should say "New filters". I'm fixing it.
I have to complete the docs with info about extending Lume with new plugins, transformers, filters, etc.
I just added docs for loaders (https://lumeland.github.io/advanced/loaders/).

[oscarotero]

I just added some documentation for processors, engines and plugins.

[shadowtime2000]

For minification, we could use deno_swc which allows us to use SWC for creating an AST, and it also has built in minification in the stringification of that AST.

import { parse, print } from "https://x.nest.land/swc@0.0.6/mod.ts";

const code = await Deno.transpileOnly("const x: string = 'asdf';");

const thing = parse(code, {
    syntax: "ecmascript"
});

console.log(print(thing, {
    minify: true,

}))

[probins]

looks like deno_swc uses Terser (via esm.sh and Wasm) for minification. Seems rather a roundabout way of using Terser :-). swc-project/swc#1302 is swc's current work on adding a Terser port. denoland/deno#6900 is Deno's issue for incorporating this in Deno bundle. denopack's using the browser version of Terser looks like the best way forward to me. A Lume plugin could easily do something like the shell script in terser/terser#544 (comment).

[oscarotero]

Have you tried https://github.com/timreichen/Bundler?

[probins]

looks interesting - something else for me to investigate. :-) Also uses Terser from esm.sh.

[probins]

AFAICS, Bundler does no tree-shaking. So I'm sceptical how much use it is for browsers. Might be ok for Deno though, where bundle size is not so important.

[oscarotero]

Instead creating filters for every processor (css, bundle, svg etc), I finally created the inline processor, to insert automatically in the html the code of any resouce with the inline attribute. For example:

<link rel="stylesheet" href="styles.css" inline>
<script src="script.js" inline></script>
<img src="image.png" inline>
<img src="image.svg" inline>

Is converted to:

<style>
  /* Styles here */
</style>
<script>
  /* Scripts here */
</script>
<img src="data:image/png;base64,...">
<svg>
  /* Svg code here */
</svg>