support resource plugin based transformations for standard module formats (ex: import JSON, CSS) for SSR

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

Coming out #831 and the evolution of Greenwood from purely static sites, is the need to be able to support our Resource plugins when running server side code, e.g. NodeJS, and not in the browser, as was the use case when the original API was created.

Routes

Server side routes right now can only be written in JS. It would be great if users could author their routes in TS.

// artists.ts
import { Artist } from '../../services/artist/artist.model.ts';

async function getBody(): String {
  const artists<Artist> = fetch('http://www.example.com/api/artists')
    .then(resp => resp.json());

  return `
     ...
  `
}

export {
  getBody
}

Resource Plugins

There is a lot of overlap with the above since I think the solution would be the same, but SSR and any form of pre-rendering will fall down is if anywhere in the SSR chain we start using resource plugins, or any sort of file transformation we are doing for the browser.

import { css, html, LitElement, unsafeCSS } from 'lit';
import footerCss from './footer.css?type=css';

class FooterComponent extends LitElement {
  constructor() {
    super();

    this.STARTING_YEAR = 2007;
    this.currentYear = new Date().getFullYear(); 
  }

  static get styles() {
    return css`
      ${unsafeCSS(footerCss)}
    `;
  }

  render() {
    const { currentYear, STARTING_YEAR } = this;

    return html`
      <footer class="container as-footer">
        <div class="row">
      
          <div class="col-xs-12">
            <p class="copyright-text">&copy; ${STARTING_YEAR} - ${currentYear} Analog Studios</p>
          </div>
      
        </div>
      </footer>
    `;
  }
}

customElements.define('app-footer', FooterComponent);

NodeJS on its own I don't think will have any idea what to do with something like

import footerCss from './footer.css?type=css'

Details

I think that NodeJS supports things like custom loaders (if that is even the right API name) since I believe that is how projects like ts-node exist I assume? My hope is that we can just get "in front" of NodeJS as it resolves file and just look at the extension and just apply the right resource at it, pretty much like we do now when serving it to the browser.

Ultimately, if a user has a plugin for a file extension handled by a resource, Greenwood should use that resource for them on the server side too.

---

Not sure we can start leaning on CSS or JSON imports for some of this now? 🤔

[thescientist13]

In theory, something like this would allow us to entirely pretender the Greenwood website with Lit, and at least for Lit users, provide an extremely compelling, and idiomatic solution for pre-rendering a static site, if / when no SSR is needed.

[thescientist13]

So good news / bad news. Good news, there is this awesome blog post (which I should shout out) which pretty much breaks down the entire process of using custom loaders. Pretty much perfectly aligns with how our Resource Plugin API works and so just a matter of wiring all the parts together.

One note: did have to explicitly spell out the path to the boostrap / loader script, e.g.

// @greenwood/cli/src/index.js

#!/usr/bin/env node --experimental-loader ./node_modules/@greenwood/cli/src/bootstrap.js

The bad news is that as can be seen from the above, this Loaders feature is currently experimental. I should try and find a GitHub issue on the topic to link to here to get a better understanding of viability and stability.