Skip to content

Commit

Permalink
content/v0.29.0 release blog post (#1174)
Browse files Browse the repository at this point in the history
* release v0.29.0 blog post

* add MDN links to URL and import.meta.url

* add whats next section content

* fix markdown snippet linting

* minor grammar and phrasing revisions

* PR feedback and revisions

* final revisions

* feature callouts and embed video example

* final nits and grammar
  • Loading branch information
thescientist13 authored Nov 8, 2023
1 parent 7c9c23f commit a1d247f
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 1 deletion.
Binary file added www/assets/serverless.webp
Binary file not shown.
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.29.0](/blog/release/v0-29-0/) 📝
- [State of Greenwood (2023)](/blog/state-of-greenwood-2023/) 📣
- [Release: v0.28.0](/blog/release/v0-28-0/) 📝
- [Release: v0.27.0](/blog/release/v0-27-0/) 📝
Expand Down
116 changes: 116 additions & 0 deletions www/pages/blog/release/v0-29-0.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
---
label: 'blog'
title: v0.29.0 Release
template: blog
---

# Greenwood v0.29.0

**Published: Nov 8, 2023**

<img src="/assets/serverless.webp" style="display:block; width: 35%; margin: 0 auto;" alt="Serverless function cloud"/>

## 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)
1. Web Server Components
1. 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**](https://www.netlify.com/) and [**Vercel**](https://vercel.com/) 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! 🚀

<video width="100%" controls>
<source src="//s3.amazonaws.com/hosted.greenwoodjs.io/greenwood-full-stack-ssr-htmx.mov">
</video>

It's as easy as installing and adding the plugin to your _greenwood.config.js_.
```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**](https://github.com/ProjectEvergreen/greenwood/tree/rmaster/packages/plugin-adapter-netlify) and [**Vercel**](https://github.com/ProjectEvergreen/greenwood/tree/rmaster/packages/plugin-adapter-vercel) plugins, and keep your eyes out for future plugins as we look to land support for [**AWS**](https://github.com/ProjectEvergreen/greenwood/issues/1142) and [**Cloudflare**](https://github.com/ProjectEvergreen/greenwood/issues/1143). 👀

> _You can check out our showcase repos for each platform [here](https://github.com/ProjectEvergreen/greenwood-demo-adapter-netlify) and [here](https://github.com/ProjectEvergreen/greenwood-demo-adapter-vercel)._

### Web Server Components

Although [Custom Elements as pages](/blog/release/v0-26-0/#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"](/docs/server-rendering/#data-loading), allowing dynamic request time handling to occur within the custom element.

```js
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](https://github.com/ProjectEvergreen/greenwood/issues/1177) and fleshing out Greenwood's capabilities through features like [dynamic routing](https://github.com/ProjectEvergreen/greenwood/issues/882) and [hydration](https://github.com/ProjectEvergreen/greenwood/issues/880)._

### Static Asset Bundling

As an alternative to the pre-defined [_assets/_ directory](/docs/css-and-images/), Greenwood now handles static asset "bundling" when referencing resources like images in your JavaScript. Through a combination of [`new URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) and [`import.meta.url`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta), 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_. 💯

```js
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](https://github.com/ProjectEvergreen/greenwood/issues/1163)._
## 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](https://github.com/ProjectEvergreen/greenwood/milestone/3), 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](https://github.com/thescientist13/greenwood-htmx)
- [Rendering Lit+SSR on Vercel Serverless functions](https://github.com/thescientist13/greenwood-demo-adapter-vercel-lit)
We're also planning a significant [redesign of the Greenwood website](https://github.com/ProjectEvergreen/greenwood/issues/978) to help better showcase all of Greenwood's capabilities and to streamline and simplify the documentation.
So stay tuned, join our [Slack](https://join.slack.com/t/thegreenhouseio/shared_invite/enQtMzcyMzE2Mjk1MjgwLTU5YmM1MDJiMTg0ODk4MjA4NzUwNWFmZmMxNDY5MTcwM2I0MjYxN2VhOTEwNDU2YWQwOWQzZmY1YzY4MWRlOGI) or [Discord](https://discord.gg/pFbynPar) communities to be part of the conversation, and we look forward to seeing you for the next release. ✌️
2 changes: 1 addition & 1 deletion www/pages/docs/css-and-images.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ You can do the same in your HTML
</header>
```

In your JavaScript, you can also use a combination of `new URL` and `import.meta.url` which means you can put the file anywhere in your project, not just the _assets/_ directory and it will be resolved automatically! For production builds, Greenwood will generate a unique filename for the asset as well, e.g. _logo-83bc009f.svg_.
In your JavaScript, you can also use a combination of [`new URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) and [`import.meta.url`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta) which means you can put the file anywhere in your project, not just the _assets/_ directory and it will be resolved automatically! For production builds, Greenwood will generate a unique filename for the asset as well, e.g. _logo-83bc009f.svg_.

> _We are looking to improve the developer experience around using `new URL` + `import.meta.url` as part of an overall isomorphic asset bundling strategy. You can visit this [GitHub issue](https://github.com/ProjectEvergreen/greenwood/issues/1163) to follow along._
Expand Down

0 comments on commit a1d247f

Please sign in to comment.