Skip to content

v0.10.0-alpha.5

Pre-release
Pre-release
Compare
Choose a tag to compare
@thescientist13 thescientist13 released this 20 Feb 16:28
· 677 commits to master since this release

Overview

This alpha.5 release introduces a couple breaking changes but also provides the fallback for those by introducing three new plugins! In general, Greenwood wants to keep a lean core focused a very dedicated closeness to the web, and so for thins like being able to use import for non standard things (like CSS) have now been moved out to plugins that Greenwood provides. You of course can make your own for these, but Greenwood does want to provide a balance between all these, you can expect more plugins for Greenwood to support going forward as well, like TypeScript and Babel.

It also introduced two new plugin types:

Note: Each 0.10.0-alpha.N release will build upon itself release notes wise, with the sum all release notes being included in the final, actual 0.10.0 release. Please read here for the previous release's release notes. For more high level details about this upgrade, you can check out or Request For Contributions Google doc to learn more about our current project Roadmap and direction. (please reach out if interested in helping!)

To test this upgrade, you can run the following

# npm
$ npm install @greenwood/[email protected] --save-dev

# yarn
$ yarn add @greenwood/[email protected] --dev

You can see an example of an upgrade in our Getting Started repo.

Breaking Changes

PostCSS

if you want to use PostCSS, you will now need to install a plugin and include that in your greenwood.config.js. You can then create your own postcss.config.js and the plugin will forward your config onto

  1. Install plugin
    $ yarn add @greenwood/plugin-postcss --dev
  2. Include the plugin in your greenwood.config.js
    const pluginPostcss = require('@greenwood/plugin-postcss');
    
    module.exports = {
    
      plugins: [
        pluginPostcss()
      ]
    }
  3. Provide your own postcss.config.js
    module.exports = {
      plugins: [
        require('postcss-nested') // as an example
      ]
    };
  4. Now you can use nested CSS
    header {
      & nav {
        /* some styles */
      }
    }

Import CSS

if you want to be able to import your CSS, you will now need to install a plugin and include that in your greenwood.config.js. You can then use ESM import syntax to get CSS as a string your JavaScript.

  1. Install plugin
    $ yarn add @greenwood/plugin-import-css --dev
  2. Include the plugin in your greenwood.config.js
    const pluginImportCss = require('@greenwood/plugin-import-css');
    
    module.exports = {
    
      plugins: [
         ...pluginImportCss() // notice the spread ... !
      ]
    }
  3. Now you can import CSS in your JS
    import css from './some-file.css';
    
    console.log(css); // will be a string of the contents of your CSS file

Import CommonJS

if you want to be able to import CommonJS modules (as are commonly found on NPM), you will now need to install a plugin and include that in your greenwood.config.js. You can then use ESM import syntax to load these types of modules, like lodash, in your JavaScript.

  1. Install plugin
    $ yarn add @greenwood/plugin-import-commonjs --dev
  2. Include the plugin in your greenwood.config.js
    const pluginImportCommonjs = require('@greenwood/plugin-import-commonjs');
    
    module.exports = {
    
      plugins: [
         ...pluginImportCommonjs() // notice the spread ... !
      ]
    }
  3. Now you can import CommonJS modules in your JS
    import _ from 'lodash';
    
    _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 }) // → { 'a': 1, 'b': 2 }

Please see the previous release notes for any previously documented breaking changes 👆

Key Changes

Changelog

  1. Server Plugin API
  2. PostCSS and import CSS as plugins, and new Rollup Plugin
  3. Support for import for CommonJS modules, as a plugin

Known Issues

A lot of features available in 0.9.0 of Greenwood are not available at this time in this release. The full list of outstanding items is here, with the main ones being captured below for quick reference:

  1. module cssnano not found
  2. Restore GraphQL support
  3. <link> tag detection is incorrect
  4. top level HTML page builds without the page content
  5. Restore optimizations and SPA support
  6. Restore Babel / Browserslist support

Diff

$ git diff v0.10.0-alpha.4 v0.10.0-alpha.5 --stat
 greenwood.config.js                                                        |   6 +-
 lerna.json                                                                 |   2 +-
 netlify.toml                                                               |   5 +-
 packages/cli/package.json                                                  |  16 +--
 packages/cli/src/commands/develop.js                                       |  27 +++--
 packages/cli/src/config/postcss.config.js                                  |   5 -
 packages/cli/src/config/rollup.config.js                                   | 183 ++++++++++++++++++++------------
 packages/cli/src/lib/resource-interface.js                                 |  51 +++++----
 packages/cli/src/lib/server-interface.js                                   |  18 ++++
 packages/cli/src/lifecycles/config.js                                      |   2 +-
 packages/cli/src/lifecycles/graph.js                                       |   5 +-
 packages/cli/src/lifecycles/serialize.js                                   |   5 +-
 packages/cli/src/lifecycles/serve.js                                       |  73 ++++++++-----
 packages/cli/src/plugins/resource/plugin-node-modules.js                   | 158 +++++++++++++++++++++-------
 packages/cli/src/plugins/resource/plugin-standard-css.js                   |  63 ++++++-----
 packages/cli/src/plugins/resource/plugin-standard-html.js                  |  32 ++----
 packages/cli/src/plugins/resource/plugin-standard-javascript.js            |   2 +
 packages/cli/src/plugins/resource/plugin-standard-json.js                  |   2 +
 packages/cli/src/plugins/resource/plugin-user-workspace.js                 |   7 +-
 packages/cli/src/plugins/server/plugin-livereload.js                       |  58 +++++++++++
 .../build.default.import-node-modules.spec.js                              | 191 ++++++++++++++++++++++++++++++++++
 packages/cli/test/cases/build.default.import-node-modules/package.json     |   9 ++
 .../cli/test/cases/build.default.import-node-modules/src/pages/index.html  |  16 +++
 .../cli/test/cases/build.default.import-node-modules/src/scripts/main.js   |   9 ++
 .../test/cases/build.plugins.error-type/build.plugins.error-type.spec.js   |   2 +-
 packages/plugin-google-analytics/README.md                                 |  20 ++--
 packages/plugin-google-analytics/package.json                              |  10 +-
 packages/plugin-google-analytics/src/index.js                              |   9 +-
 packages/plugin-import-commonjs/README.md                                  |  45 ++++++++
 packages/plugin-import-commonjs/package.json                               |  33 ++++++
 packages/plugin-import-commonjs/src/index.js                               |  95 +++++++++++++++++
 packages/plugin-import-commonjs/test/cases/default/default.spec.js         |  88 ++++++++++++++++
 packages/plugin-import-commonjs/test/cases/default/greenwood.config.js     |   7 ++
 packages/plugin-import-commonjs/test/cases/default/package.json            |   6 ++
 packages/plugin-import-commonjs/test/cases/default/src/pages/index.html    |  13 +++
 packages/plugin-import-commonjs/test/cases/default/src/scripts/main.js     |   4 +
 packages/plugin-import-css/README.md                                       |  41 ++++++++
 packages/plugin-import-css/package.json                                    |  31 ++++++
 packages/plugin-import-css/src/index.js                                    |  56 ++++++++++
 packages/plugin-import-css/test/cases/default/default.spec.js              |  67 ++++++++++++
 packages/plugin-import-css/test/cases/default/greenwood.config.js          |   7 ++
 packages/plugin-import-css/test/cases/default/src/main.js                  |   3 +
 packages/plugin-import-css/test/cases/default/src/pages/index.html         |  13 +++
 packages/plugin-import-css/test/cases/default/src/styles.css               |   3 +
 packages/plugin-polyfills/README.md                                        |  16 ++-
 packages/plugin-polyfills/package.json                                     |  10 +-
 packages/plugin-polyfills/src/index.js                                     |   8 +-
 packages/plugin-postcss/README.md                                          |  56 ++++++++++
 packages/plugin-postcss/package.json                                       |  28 +++++
 packages/plugin-postcss/src/index.js                                       |  79 ++++++++++++++
 .../test/cases/default/default.spec.js}                                    |   9 ++
 packages/plugin-postcss/test/cases/default/greenwood.config.js             |   7 ++
 .../test/cases/default}/postcss.config.js                                  |   0
 .../test/cases/default}/src/pages/index.html                               |   0
 .../test/cases/default}/src/styles/main.css                                |   0
 www/package.json                                                           |   2 +-
 www/pages/docs/build.md                                                    | 116 ---------------------
 www/pages/docs/css-and-images.md                                           |   2 +-
 www/pages/docs/front-matter.md                                             |   2 +-
 www/pages/docs/markdown.md                                                 |   2 +-
 www/pages/plugins/custom-plugins.md                                        |   3 +
 www/pages/plugins/index.md                                                 |   7 +-
 www/pages/plugins/resource.md                                              |  71 +++++++++----
 www/pages/plugins/rollup.md                                                |  32 ++++++
 www/pages/plugins/server.md                                                |  64 ++++++++++++
 yarn.lock                                                                  |  96 ++++++++++++++++-
 66 files changed, 1687 insertions(+), 421 deletions(-)

Lighthouse

greenwood-v0 10 0-alpha 5-lighthouse