Greenwood v0.27.0

Published: November 23, 2022

What's New

Innovations in the industry like with serverless and edge platforms, combined with the emergence of Web API based JavaScript runtimes, have been motivating the Greenwood team for a while now. In particular, how to make the experience of writing sites and applications more consistent across the entire stack, especially for web standards and Web Components. In our last release, we introduced Web Components Compiler (WCC), which made writing native Web Components for SSR even easier for developers, and enabled us to introduce our own innovation of custom elements as pages.

Full Stack Web Components Greenwood is ecstatic to embrace this future for the web, in which there is a world where dynamic can be just as practical as static, and the web can be all around you. With this release, Greenwood is able to deliver another step towards making sure it's just as easy to write a Web Component on the server, as it is in the browser; introducing Full Stack Web Components! ✨

Let's explore this concept through the first feature highlight of this release, Custom Imports.

Custom Imports

While Greenwood has plugins to support using ESM for non standard module formats like CSS and JSON, these were only supported for client side (browser) based and bundling use cases. When we introduced SSR and custom elements as pages, trying to import a CSS file in a server route would break. But, no more!

Starting with .css and .json, you can now use native ESM to include these assets right into your SSR pages!

// src/pages/index.js
import packageJson from '../../package.json';
import css from '../main.css';

export default class Home extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <head>
        <title>${packageJson.name}</title>

        <style>
          ${css}
        </style>
      </head>

      <body>
        <!-- ... -->
      </body>
    `;
  }
}

What's really neat is that there is no bundling going on, just a real time transformation from source format to ESM, using the NodeJS runtime!

This currently depends on an experimental feature in NodeJS v16.17.0, so checkout our documentation for full details and usage instructions.

Before the Greenwood v1.0.0 release, do we aim to align this syntax on the Import Assertions spec, while also looking to support additional formats like TypeScript.

CSS Bundling and Minification

One goal Greenwood had from the outset was to minimize as much as possible the reliance on external dependencies and third party libraries, choosing to eschew the common trend of building a "meta" framework. It's this perspective that we feel classifies Greenwood better as a "workbench", and not a framework per se. Although PostCSS is an invaluable tool in the ecosystem, we felt that for what we were using it for (minification and bundling relative @import rules), Greenwood should be able to support this basic functionality itself.

So that is what we did! From this release forward, all CSS minification and bundling will be done by Greenwood. Along with that, we have been able to drop two dependencies from our package.json. No need to change anything, it will happen automatically when you upgrade. And you can still use this with our PostCSS plugin.

If you do find any issues or regressions in the CSS output, please file a bug report and we will make sure to fix it ASAP!

Build Capacity

The last highlight we would like to feature from this release was the introduction of thread pooling for static builds that rely on SSR based page generation, like when using the prerender configuration option. In adopting this SSG benchmark, it was clear that without some work, Greenwood would not be able to build thousands of pages in this way, let alone quickly.

So under the hood, Greenwood now introduces thread pooling to avoid crashing NodeJS through the spawning of too many Worker threads, based on our Getting Started repo. While it might not be the fastest, at least Greenwood will now be able handle the thousands of pages you may throw at it! 😅

What's Next

With another release complete, the Greenwood team already has its sights set on the next one. In keeping with our goal to make Full Stack Web Components the best experience possible, we are looking to explore these key features and enhancements next.

NodeJS v18 - This will bring native support for fetch, JSON Modules, and import assertions! We plan to make this the new minimum version.
Standard and Conventions - Runtime wise, Greenwood would like to move in a direction less coupled to NodeJS (agnostic runtime) by adopting a more web-centric based architecture and plugin model, leveraging standard Request and Response APIs.
API Routes - We want to make /api/* routes happen in Greenwood!
As a project showcase, check out the recently launched Tuesday's Tunes website and repo, built with Greenwood and WCC, leveraging Tailwind CSS, content and webhooks powered by Contentful, and built on Netlify!

Thanks for reading!