v0.30.0

Overview

The v0.30.0 release is here! Please check out our blog post to learn about some of the new features now available.

Changelog

https://github.com/ProjectEvergreen/greenwood/issues?q=label%3Av0.30.0

1. Isolation Mode
2. Lit v3 Upgrade and SSR Enhancements
3. Single File Bundles (SFBs) for SSR pages and API routes - thanks @DevLab2425 🙌
4. Upgrade Rollup (and friends) to 3.x - thanks @DevLab2425 🙌
5. CSS and JSON import attributes
6. support bundling of url properties (like for @font-face + src) during CSS file optimization
7. Layouts (Templates) and Pages
8. support all CSS function pseudo classes / elements for CSS optimizing
9. Sitemap Generation (static) (thanks @jstockdi 🙌 )
10. improve naming for (nested) bundled SSR page and API route entry points to better reflect original file based routing name](#1226)
11. nested SSR pages (and API routes) are throwing a module not found error (needs additional patch for adapters)
12. "real" production import attributes
13. CSS optimization workflow parity during development
14. attributes for frontmatter imports
15. polyfill configurations for import maps and attributes
16. improve init package scaffolding baseline starting point
17. livereload not reloading on SVG (image) file changes consistently
18. CSS Nesting Support
19. HTML Web Components
20. CSS Modules ™️ plugin
21. Content as Data

Breaking Changes

Minimum NodeJS Version

The new minimum NodeJS version for Greenwood is now v18.20.0. Make sure to update your CI and hosting scripts accordingly.

Layouts

The templates/ directory has now re-named to the layouts/ directory. This includes your frontmatter.

# before
src/
  templates/
    app.html

# after
src/
  layouts/
    app.html

API Routes

API routes have now been nested under the pages/ directory to better emphasis the shared routing of file based routing for pages, as the URLs all end up in the same "namspace" anyway

# before
src/
  api/
    search.js

# after
src/
  pages/
    api/
      search.js

Important

Don't forget to update any references to any relative ESM imports in your API routes.

Custom Imports

This now means that using custom imports no longer requires the experimental flag, though a flag is still needed

# before
$ node --experimental-loader ./node_modules/@greenwood/cli/src/loader.js ./node_modules/.bin/greenwood <command>

# after
$ node --loader ./node_modules/@greenwood/cli/src/loader.js ./node_modules/.bin/greenwood <command>

Note

We hope that before our 1.0 release this flag will not be required.

Active Frontmatter

The activeFrontmatter configuration setting has been renamed to activeContent and now enabled with it all the related Content as Data feature set. The old interpolateFrontmatter behavior is still there, and now additional frontmatter is has been exposed to users. The full list includes

• id
• route
• title
• label
• data
• tableOfContents (which is Array<Object{ label, route }>

Menus

Menus have been renamed / re-implemented as Collections and their usage for GraphQL users will need to be updated to adopt that convention.

In general, these will the steps you will need to take:

1. Frontmatter

   <!-- before -->
   ---
   menu: navigation
   ---
   
   <!-- after -->
   ---
   collection: navigation
   order: 1
   ---

2. MenuQuery will need to be renamed to CollectionQuery and you will pass a name instead of menu property

   // before
   import MenuQuery from '@greenwood/plugin-graphql/src/queries/menu.gql';
   
   const response = await client.query({
     query: MenuQuery,
     variables: {
       menu: 'navigation'
     }
   });
   
   const navigation = response.data.menu.children.map(item => item.item);
   
   // after
   import CollectionQuery from '@greenwood/plugin-graphql/src/queries/collection.gql';
   
   const response = await client.query({
     query: CollectionQuery,
     variables: {
       name: 'navigation'
     }
   });
   
   this.navigation = response.data.collection;

Polyfills (Import Maps / Import Attributes)

Import Maps

As Import Maps are now pretty widely supported by browser, their polyfilling has been disabled by default. To enable this for development (only), add this configuration to your greenwood.config.js

export default {
  polyfills: {
    importMaps: true
  }
}

Import Attributes

As Import Attributes (CSS, JSON) are not widely supported across all browsers, an option has been added to greenwood.config.js if you want Greenwood to polyfill these behaviors (essentially inlining the modules contents as a default export.

export default {
  polyfills: {
    importAttributes: ['css', 'json'] // choose which ones you want polyfilled
  }
}

Import CSS / JSON Plugin deprecations

Now that loading CSS and JSON are web standards, the following plugins will no longer be recieving updates and will be deprecated as part of this release.

• plugin-import-css
• plugin-import-json

Import Raw

However, if you still need to load arbitrary content as an ES Module like the CSS plugin provided, there is now a general purpose plugin called plugin-import-raw which can provided this functionality, e.g.

/* my-component.css */
h1 {
  color: red;
}

import styles from './my-component.css?type=raw'`;

console.log(styles); // h1 { color: red; }

Tip

If you were using these plugins within something like WTR, you'll want to modify your customizations accordingly by making sure to pass the Sec-Fetch-Dest header. See this file for reference.

Lit Renderer Plugin

The Lit Renderer has a few breaking changes to be aware of

1. You must use the getBody API (Custom Elements as Pages are not support with Lit)
2. The compatible version of Lit is now v3
3. You'll want to use isolation mode for your API routes (in particular when using greenwood serve as it is also the default for SSR pages)

See a working example here

Known Issues

1. Import CSS / JSON plugins not showing as deprecated
2. TypeScript plugin not working with servePage and additional options
3. npx @greenwood/init failing when no custom directory provided

Diff

v0.29.4...v0.30.0