Greenwood v0.29.0

Published: Nov 8, 2023

What's New

The Greenwood team is back with a new release and we're excited to share with you what we've been up to. From this latest release, here are three features we'd like to highlight:

1. Serverless Adapters (Netlify, Vercel)
2. Web Server Components
3. Static Asset Bundling

Let's check them out! 👇

Serverless Adapters

The simplicity of serverless hosting can be a great advantage in achieving dynamic with the ease of static. As part of this release, the Greenwood team has now made it so that you can easily adapt a Greenwood project's SSR pages or API endpoints to run on Netlify and Vercel serverless hosting.

In the demo video below, you can see a mix of static (HTML) pages and templates rendering alongside purely SSR pages and API endpoints, all running on serverless hosting. SSR pages and API endpoints are capable of server rendering real custom elements, meaning you can get full-stack Web Components with Greenwood! 🚀

It's as easy as installing and adding the plugin to your greenwood.config.js.

// import { greenwoodPluginAdapterVercel } from '@greenwood/plugin-adapter-vercel';
import { greenwoodPluginAdapterNetlify } from "@greenwood/plugin-adapter-netlify";

export default {
  plugins: [greenwoodPluginAdapterNetlify()],
};

Check out the README docs for our currently supported Netlify and Vercel plugins, and keep your eyes out for future plugins as we look to land support for AWS and Cloudflare. 👀

You can check out our showcase repos for each platform here and here.

Web Server Components

Although Custom Elements as pages are not a new feature, as Greenwood continues to enhance its capabilities on the backend, hooking these pages into the request / response lifecycle was an obvious need, and so we are now "promoting" these custom elements to a new name; Web Server Components. ✨

The API is still the same and continues to run only on the server, except now Greenwood will provide the Request object for the incoming request as a "constructor prop", allowing dynamic request time handling to occur within the custom element.

export default class PostPage extends HTMLElement {
  constructor(request) {
    super();

    const params = new URLSearchParams(request.url.slice(request.url.indexOf("?")));
    this.postId = params.get("id");
  }

  async connectedCallback() {
    const { postId } = this;
    const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then((resp) =>
      resp.json(),
    );
    const { title, body } = post;

    this.innerHTML = `
      <h2>${title}</h2>
      <p>${body}</p>
    `;
  }
}

We plan to continue building on this concept for response handling and fleshing out Greenwood's capabilities through features like dynamic routing and hydration.

Static Asset Bundling

As an alternative to the pre-defined assets/ directory, Greenwood now handles static asset "bundling" when referencing resources like images in your JavaScript. Through a combination of new URL and import.meta.url, your resource can now be located anywhere in your project's workspace.

For production builds, Greenwood will generate a unique filename for the asset as well, e.g. logo-83bc009f.svg. 💯

const logo = new URL("../path/to/images/logo.svg", import.meta.url);

class Header extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <header>
        <h1>Welcome to My Site</h1>
        <!-- handles nested routes / deeplinking, e.g. https://www.mysite.com/some/page/ -->
        <img src="${logo.pathname.replace(window.location.pathname, "/")}" alt="My logo"/>
      </header>
    `;
  }
}

customElements.define("app-header", Header);

We are looking to improve the developer experience around this pattern so please feel free to follow along or comment in this GitHub issue.

What's Next

We're really excited to see the progress Greenwood has been able to make this year, and are looking forward to seeing where the community can take it. As we get closer to finalizing our 1.0 Roadmap, we've been playing around with more ecosystem projects and making little demos to share with you all. We encourage you to check them out to see what Greenwood is capable of and help us push the boundaries of the full-stack web! 🙌

• Server rendering custom elements with WCC on Vercel Serverless functions using htmx
• Rendering Lit+SSR on Vercel Serverless functions

We're also planning a significant redesign of the Greenwood website to help better showcase all of Greenwood's capabilities and to streamline and simplify the documentation.

So stay tuned, join our Slack or Discord communities to be part of the conversation, and we look forward to seeing you for the next release. ✌️