Infima & Lume Components

In the simplest form, a component in Lume is just a bit of HTML with some variables that is returned by an asynchronous function; great for creating the little utilities that make creating pages easier and more maintainable.

An example of a component used in the site right now is the one that fetches the latest blog post on this site's index page, which comes from src/_components/latestBlog.vto:

{{ for post of search.pages(
    "waypoint=%blog% menu.visible=true", 
    "date=desc", (max_posts || 1)) }}
    <!--  show the content of max_posts posts -->
{{ /for }}

This is called in the index template with the following code:

  {{ await comp.latestBlog({ max_posts: 1 }) }}

Neat, right?

But it's not fun to develop css, JS and template code all in the same file, nor is it advisable to have style sheets and scripts full of code to support features that went away long ago, so wouldn't it be more ideal if components could manage just that bare minimum for themselves?

That would be really cool, and that's what's happening in Lume.

New Component Layout In Lume 3

Instead of just _components/ with a bunch of files, we're moving to this structure:

  _components/
      - siteComponent/
          - comp.vto    < The template code
          - style.css   < Any classes written just for it
          - script.js   < JS for events, whatever else it needs to work

So, when you used comp.siteComponent(), it would automatically load what it needs. You can edit with working IDE highlighting, and your site doesn't get loaded down with CSS from unused junk (we have plugins to strip away unused classes anyway, but I digress).

Optimization and removing unused classes is of course going to happen in plugins, but there's still a lot of potential per-page savings. And, these components easily transcend into MDX, which will be well-documented once Lume 3 is stable.

Right now, development is happening against v3-dev, which is actually rather stable, but there's a ton of new stuff for those not already caught up.

Using Lume 3 Components In MDX Pages And Vento Templates:

The comp property in Lume is the way to access components in MDX/JSX or through templates. In MDX you would:

<comp.alert type="warning" allowDismiss="false" message="Boo!" />

In Vento, you'll need to supply an await, as all components in Lume 3 are now asynchronous:

{{ await comp.alert({type: "warning", message: "Boo!" }) }}

Note that your component JS code should immediately exit if it doesn't apply to the current page. While it is loaded on-demand, it still gets put in the global scope.

The Goal: Lume 3 Style For Any Component That Loads Assets

Eventually, the Infima components that make sense as well as things like tag and navigation helpers will be available as Lume 3 components. There's already some filling in.

When writing something that runs more than once, or in more than one place, think strongly about making it a component. If that component loads css and / or JS in addition to Infima, it should be a Lume 3 component. Nothing will break horribly if you use the old style, except the heart of the next maintainer.

If your component doesn't load scripts or styles, just use the old-style components.

It's not practical to write component wrappers around 100% of Infima, or significantly reduce its size by making its own component CSS pluggable, and still be compatible with people who want to copy over existing content.

The pages archetype is the last one to be finished, and it will be the result of being able to produce real results with very little markup or deep programming or design knowledge using these components.