Skip to content

v0.17.0

Latest
Latest
Compare
Choose a tag to compare
@thescientist13 thescientist13 released this 05 Apr 17:33
0.17.0
922a0d0

Overview

This release adds some typings for WCC and makes some breaking changes around the API supporting Node's custom loaders (including TypeScript support), sets a new minimum NodeJS version, and drops the CommonJS distribution. The shape for Metadata was also changed.

Changelog

https://github.com/ProjectEvergreen/wcc/issues?q=label%3A0.17.0

  1. Add typings for WCC
  2. Leverage native NodeJS TypeScript support
  3. Set minimum NodeJS version to >= 18
  4. Adopt new NodeJS loaders API for custom imports
  5. drop support for CommonJS distribution

Breaking Changes

Minimum NodeJS Version

The minimum NodeJS version for WCC is now >= 18.x

Custom Loaders (JSX / TS)

TypeScript

Support is now built-in, you no longer need to use the custom loader anymore. Follow these steps / guidelines:

  1. You will need to use Node >= 22.6.0 and set the --experimental-strip-types flag (or >= 23.x without the flag)
  2. (Optional) Install TypeScript into your project, e.g. npm i typescript --save-dev
  3. (Optional) Create a tsconfig.json file at the root of your project with these minimum configuration settings

JSX

For the JSX custom loader, you'll now need to use the new --import API and WCC's register function instead

# before
$ node --loader ./node_modules/wc-compiler/src/jsx-loader.js your-script.js
# after
$ node --import ./node_modules/wc-compiler/src/register.js your-script.js

# or

$ NODE_OPTIONS="--import wc-compiler/register" node your-script.js

Metadata

When calling renderToString or renderFromHTML, WCC optionally returns a metadata object with all the custom elements registered / detected, and any relevant details. The original shape of this object as documented was a bit broken, and so it has been "fixed" now to make sense

// before (some sort of array like object)
{
  metadata: [
    'wcc-footer': { instanceName: 'Footer', moduleURL: [URL], isEntry: true },
    'wcc-header': { instanceName: 'Header', moduleURL: [URL],  isEntry: true },
    'wcc-navigation': { instanceName: 'Navigation', moduleURL: [URL],  isEntry: false }
  ]
}
// after (an object)
{
  metadata: {
    'wcc-footer': { instanceName: 'Footer', moduleURL: [URL], isEntry: true },
    'wcc-header': { instanceName: 'Header', moduleURL: [URL],  isEntry: true },
    'wcc-navigation': { instanceName: 'Navigation', moduleURL: [URL],  isEntry: false }
  }
}

CommonJS Bundle

We have removed support for the CommonJS bundle / distribution.

Known Issues

N / A

Diff

0.16.0...0.17.0

Assets 2
Loading