Greenwood v0.19.0

Published: Nov 11, 2021

What's New

This latest release is pretty exciting for us with the introduction of two new features!

  1. New Project Scaffolding
  2. HTML Include Plugin

New Project Scaffolding

With the Greenwood CLI, you can run and manage Greenwood projects right from the command line, using your favorite package manager, or on the fly with npx. But starting a new project was a different story. Although we had a few options for getting started with an example repo, starting a new "empty" project was not possible without manually creating it all yourself. But now, Greenwood has you covered!

With the new package @greenwood/init (contributed by @hutchgrant), getting a new bare project started is just one command away!

# make your project directory
$ mkdir my-app && cd my-app

# init!
$ npx @greenwood/init@latest

# or, init and auto npm install
$ npx @greenwood/init@latest --install

init

We have a lot of ideas and plans to add more capabilities to this command like scaffolding from an existing repository and creating a prompt based interface to make adding and navigating options more ergonomic, so please feel free to follow along or join the discussion!

Reminder, if you've built something with Greenwood, submit a PR to our README and add it to the list! ✌️

HTML Include Plugin

Greenwood loves the web. And we love JavaScript. What could be better than JavaScript? More JavaScript surely!? Actually, we believe it's more HTML (and don't call me Shirley). With our new plugin, we hope to blend the best of both worlds! 🤝

Our new plugin, plugin-include-html aims to follow in the spirit of the abandoned HTML Imports spec that was originally part of the initial Web Components "feature suite", and gives developers two new ways to ship more static HTML with NO client side JavaScript overhead incurred.

This is the simplest "flavor" and follows the spec more closely to address the use case where you have static HTML that you want to reuse across your pages, like a global header or footer.

So given a snippet of HTML

<header class="my-include">
  <h1>Welcome to my website!<h1>
</header>

And a page template, you could then add this <link> tag

<html>

  <body>
    <!-- rel and href attributes would be required -->
    <link rel="html" href="/includes/header.html"></link>

    <h2>Hello 👋</h2>

  </body>

<html>

And Greenwood will statically generate this

<html>

  <body>
    <header class="my-include">
      <h1>Welcome to my website!<h1>
    </header>

    <h2>Hello 👋</h2>

  </body>

<html>

Custom Element (JavaScript)

For more advanced use cases where customization of the output may need to be done in a programmatic fashion and in supporting upcoming SSR based workflows, the custom element flavor supports declaring functions for providing markup and data that Greenwood will then build the HTML for on the fly.

So using the Greenwood footer as an example, have a JS file that exports two functions; getTemplate and getData

// src/includes/footer.js
const getTemplate = async (data) => {
  return `
    <app-footer>
      <footer class="footer">
       <a href="/">Greenwood v${data.version}</a> d
      </footer>
    </app-footer>
  `;
};

const getData = async () => {
  const version = require("../../package.json").version;

  return { version };
};

module.exports = {
  getTemplate,
  getData,
};

In a page template, you can now do this with a custom element tag

<html>
  <body>
    <h2>Hello 👋</h2>

    <app-footer src="../includes/footer.js"></app-footer>
  </body>

  <html></html>
</html>

And Greenwood would statically generate this

<html>
  <body>
    <h2>Hello 👋</h2>

    <app-footer>
      <footer class="footer">
        <a href="/">Greenwood v0.19.0</a>
      </footer>
    </app-footer>
  </body>

  <html></html>
</html>

Learn More

If you would like to learn more about these features, please join our discussion around enhancing the init scaffolding workflow and implementation and check out the init docs. Make sure to check out the docs on how to get more HTML out of your JS with our new plugin.