Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v0.28.0 release blog post #1086

Merged
merged 4 commits into from
Apr 9, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions www/pages/blog/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ template: blog

# News and Announcements

- [Release: v0.28.0](/blog/release/v0-28-0/) 📝
- [Release: v0.27.0](/blog/release/v0-27-0/) 📝
- [Release: v0.26.0](/blog/release/v0-26-0/) 📝
- [Release: v0.24.0](/blog/release/v0-24-0/) 📝
Expand Down
136 changes: 136 additions & 0 deletions www/pages/blog/release/v0-28-0.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
---
label: 'blog'
title: v0.28.0 Release
template: blog
---

# Greenwood v0.28.0

**Published: April 8, 2023**

## What's New

<img src="/assets/nodejs.png" style="display: block; width: 30%; margin: 0 auto;"/>

It's release time again and the **Greenwood** team is excited to share some of the exciting new features available in this version, as we continue to make the experience of writing for the _**Full-Stack Web**_ easier for everyone! 🙌

### Node 18

With this release, Greenwood has set the minimum version of NodeJS to 18. This NodeJS release is especially profound to us as it brings with it (amongst other things) native support for the [**Fetch API**](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). You can now use `fetch` directly in your server side code like your SSR pages! 💯

```js
// src/pages/artists.js
import '../components/card.js';

export default class ArtistsPage extends HTMLElement {
async connectedCallback() {
const artists = await fetch('https://.../api/artists').then(resp => resp.json());
const html = artists.map((artist) => {
const { name, imageUrl } = artist;

return `
<wc-card>
<h2 slot="title">${name}</h2>
<img slot="image" src="${imageUrl}" alt="Picture of ${name}"/>
</wc-card>
`;
}).join('');

this.innerHTML = html;
}
}
```

> _As a bonus worth mentioning, [JSON imports](https://simonplend.com/import-json-in-es-modules/) are now natively available using import assertions._


### Embracing Web APIs

What's great about the addition of the Fetch API is that it brings along with it many Web API friends like [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL), [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request), and [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) just to name a few. Greenwood has fully embraced this movement to adopting Web APIs not only throughout its code base, but basing entire user facing APIs around these standards as well. Why invent an API when we get everything we need from the web, in Node, and all documented by MDN!

This was especially beneficial to our [Resource Plugin API](/plugins/resource/) as it was already modeling this request / response behavior anyway, and so it was a natural fit to adopt these APIs. To give an idea of this transformation, here is a before snippet of Greenwood's internal plugin for handling CSS.
<!-- eslint-disable-next-line no-unused-vars -->
```js
class StandardCssResource extends ResourceInterface {
constructor(compilation, options) {
super(compilation, options);
this.extensions = ['.css'];
this.contentType = 'text/css';
}

async serve(url) {
const body = await fs.promises.readFile(url, 'utf-8');

return {
body,
contentType: this.contentType
};
}
}
```

And here is what it looks like now, exclusively based on Web APIs. Nothing ad-hoc anymore! ✨
<!-- eslint-disable-next-line no-unused-vars -->
```js
class StandardCssResource extends ResourceInterface {
constructor(compilation, options) {
super(compilation, options);
this.extensions = ['css'];
this.contentType = 'text/css';
}

// defining shouldServe is now required
async shouldServe(url) {
const { protocol, pathname } = url;

return protocol === 'file:' && this.extensions.includes(pathname.split('.').pop());
}

async serve(url) {
const body = await fs.promises.readFile(url, 'utf-8');

return new Response(body, {
headers: new Headers({
'Content-Type': this.contentType
})
});
}
}
```

> _This refactor touched most of our plugin APIs, so you'll want to read our [release notes](https://github.com/ProjectEvergreen/greenwood/releases/tag/v0.28.0) to learn about how to migrate any of your own custom plugins._

### API Routes

To fully round out Greenwood's server rendering capabilities, API Routes are now available. This API is based on a standard `Request` / `Response` model leveraging Web APIs directly as inputs and outputs. Let's take a look at an example.

API routes follow a file based routing convention, just like [pages](/docs/layouts/#pages). So this structure will yield an endpoint available at `/api/greeting`.
```shell
src/
api/
greeting.js
```

This example API reads a query parameter of `name` and returns a JSON response based on that.

```js
export async function handler(request) {
const params = new URLSearchParams(request.url.slice(request.url.indexOf('?')));
const name = params.has('name') ? params.get('name') : 'World';
const body = { message: `Hello ${name}! 👋` };

return new Response(JSON.stringify(body), {
headers: new Headers({
'Content-Type': 'application/json'
})
});
}
```

All web standards, all the time. You know we love to see it. 🤓

## What's Next

In addition to the above mentioned features, this release also lays the ground work for our foray into [Serverless and Edge runtime support](https://github.com/ProjectEvergreen/greenwood/issues/1008). For out next release, Greenwood team has its sights set on being able to fully embrace running beyond the server with hosting providers like Netlify and Vercel and their serverless and edge offerings, allowing us to push web standards even further down the stack! We [see this trend becoming more ubiquitous](https://wintercg.org/) as more and more hosting providers coalesce around these standards too, so now is a great time to get started!

Stay tuned, [join our Slack](https://join.slack.com/t/thegreenhouseio/shared_invite/enQtMzcyMzE2Mjk1MjgwLTU5YmM1MDJiMTg0ODk4MjA4NzUwNWFmZmMxNDY5MTcwM2I0MjYxN2VhOTEwNDU2YWQwOWQzZmY1YzY4MWRlOGI) to be part of the conversation, and we look forward to seeing you in the next release notes! ✌️