Overview

This release improves WCC's JSX transformations for inferredObservability to be fine grained.

Changelog

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

1. feat: #108 fine grained observability
2. enhancement: #214 apply publint feedback

Breaking Changes

N / A

Known Issues

N / A

Diff

0.18.1...0.19.0

Overview

This release fixes a couples bugs with WCC types and JSX transformations.

Changelog

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

1. fix: #219 preserve JSX literal attribute expressions
2. fix: #193 add missing source property on the Metadata type
3. chore: fix grammar in README

Breaking Changes

N / A

Known Issues

N / A

Diff

0.18.0...0.18.1

Overview

This release adds TSX parsing support (including type safe HTML!) to the JSX capabilities of WCC.

Changelog

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

1. feat: #164 TSX support

Breaking Changes

N / A

Known Issues

N / A

Diff

0.17.1...0.18.0

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. bug: #203 correct export types and functions

Breaking Changes

N / A

Known Issues

N / A

Diff

0.17.0...0.17.1

Overview

This release introduces native support for TypeScript (type stripping) WCC, adopt's Node's new loaders API, and bump the minimum Node version >= 18.

Changelog

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

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

Overview

This release refactors some WCC's DOM shim internals as well as address issues with setting element properties and honoring the mode option for attachShadow. There was also a breaking change to remove the deprecated getInnerHTML call with getHTML on the Node class in the DOM shim.

Changelog

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

1. Replace deprecated method getInnerHTML with getHTML (thank you @DannyMoerkerke 🙌 )
2. refactor DOM shim internals (thank you very much @briangrider 🙌 )
3. Issue Setting Element Properties (thank you @briangrider 🙌 )
4. support configurable shadowrootmode attribute for <template> tags (thank you @briangrider 🙌 )
5. verify / ensure proper serialization of shadow roots excluding closed shadow roots from getInnerHTML getHTML (thank you @briangrider 🙌 )
6. Upgrade parse5 to v7

Breaking Changes

DOM Shim

On the Node class, the getInnerHTML method has been deprecated and replaced with getHTML to align with the spec

// before
import 'wc-compiler/src/dom-shim.js';
import Greeting from './components/greeting.js';

const greeting = new Greeting();
const html = greeting.getInnerHTML({ includeShadowRoots: true });

// after
import 'wc-compiler/src/dom-shim.js';
import Greeting from './components/greeting.js';

const greeting = new Greeting();
const html = greeting.getHTML({ serializableShadowRoots: true });

Shadow Root Templates

Setting innerHTML on a Shadow Root will now automatically insert a <template> tag when using renderToString / renderFromHTML, e.g.

class MyComponent extends HTMLElement {

  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `
        <style>
          :root {
            --accent: #367588;
          }
        </style>

        <main>
          <h1>My Website</h1>
        </main>
      `;
    }
  }
}

export default Home;

Known Issues

N / A

Diff

0.15.1...0.16.0

Overview

This release fixes issues with standard JavaScript failing parsing and removes needs for a specific dependency for parsing Import Attributes.

Changelog

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

1. failing on Class fields usage
2. Import Attributes support in Acorn

Breaking Changes

N / A

Known Issues

N / A

Diff

0.15.0...0.15.1

Overview

This release introduces formal support for HTML (Light DOM) Web Components and fixing a bug for "top level" attributes not serializing and showing up as undefined.

Changelog

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

1. HTML (Light DOM) Web Components
2. top level attributes returning as undefined

Breaking Changes

N / A

Known Issues

N / A

Diff

0.14.0...0.15.0

Overview

This release introduces parsing support for TypeScript authored custom elements.

Changelog

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

1. TypeScript parsing support

Breaking Changes

N / A

Known Issues

N / A

Diff

0.13.0...0.14.0

Overview

This release introduces support for parsing Import Attributes syntax and and a basic no-op DOM shim for CSSStyleSheet (Constructable Stylesheets).

Changelog

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

1. Import Attributes syntax parsing
2. Support Constructable Stylesheets (CSS Modules) in DOM Shim
3. WCC dropping query params when loading module URLs

Breaking Changes

N / A

Known Issues

N / A

Diff

$ git diff 0.12.1 0.13.0 --stat
 .eslintrc.cjs                                                       |   10 +
 .nvmrc                                                              |    2 +-
 docs/pages/docs.md                                                  |    6 +-
 docs/pages/index.md                                                 |    1 +
 package-lock.json                                                   | 1398 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 package.json                                                        |   13 +-
 src/dom-shim.js                                                     |   12 +-
 src/jsx-loader.js                                                   |    6 +-
 src/wcc.js                                                          |   17 +-
 test/cases/constructable-stylesheet/constructabe-stylesheet.spec.js |   38 ++
 test/cases/constructable-stylesheet/src/components/header/header.js |   23 +
 test/cases/constructable-stylesheet/src/pages/index.js              |   10 +
 test/cases/import-attributes/import-attributes.spec.js              |   48 ++
 test/cases/import-attributes/src/components/header/data.json        |    3 +
 test/cases/import-attributes/src/components/header/header.js        |   17 +
 test/cases/import-attributes/src/pages/index.js                     |   10 +
 16 files changed, 1576 insertions(+), 38 deletions(-)