new filters about lume HOT 11 CLOSED

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?

from lume.

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!

from lume.

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'.

from lume.

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/).

from lume.

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

from lume.

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/[email protected]/mod.ts";

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

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

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

}))

from lume.

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).

from lume.

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

from lume.

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

from lume.

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.

from lume.

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>

from lume.