Skip to content

v0.18.0

Choose a tag to compare

View all tags
@CITguy CITguy released this 12 Dec 00:02
· 457 commits to master since this release
v0.18.0
17d25d9

The NPM update!

3jdjlv

This release was made possible by the following contributors:

Breaking Changes

  • 🚨 HelixUI.initialize() is no longer automatic for any JavaScript bundle.
    • Must be explicitly called by consuming application logic.
  • NPM assets
    • 🚨 dist/styles/ renamed to dist/css/
    • 🚨 dist/scripts/ renamed to dist/js/
    • 🚨 dist/scripts/helix-ui.js renamed to dist/js/helix-ui.cjs.js
    • 🚨 dist/scripts/helix-ui.es.js renamed to dist/js/helix-ui.esm.js
    • 🚨 dist/scripts/helix-ui.browser[.min].js renamed to dist/js/helix-ui[.min].js
  • 🚨 <hx-search> has been converted into a stylistic facade with no configurable functionality
    • See Search component docs for more info.

Corrections

  • Fixed a CSS bug that was allowing many basic form controls (introduced in v0.16.x) to escape the scrolling contexts of their ancestors (#540)

Updates

  • 🆕 added <hx-search-control> to augment native browser validation behavior
    • See Search component docs for more info.
  • Improved stability of HelixUI.initialize() in the event that WebComponentsReady fires more than once. (#641)
  • Numerous component styles have been converted from LESS to SCSS.
    • This should not result in any noticeable changes when consuming HelixUI styles.
    • We anticipate complete conversion by the v0.19.0 release.

NPM Assets

(Raw NPM diff: v0.17.3 vs v0.18.0)

  • 🆕 Web Component polyfills (v2.x) are now included as a bundled dependency of helix-ui! (#541)
    • @webcomponents/webcomponentsjs is no longer necessary as a separate production dependency!
  • 🆕 HelixUI assets have been reworked to support bundler-based workflows (#630)
    • custom-elements-es5-adapter.js now baked into all ES5 JavaScript bundles
  • 🆕 added dist/js/helix-ui.module[.min].js (ES6 Syntax in ES Module format)
    • ⚠️ not compatible with IE!
  • Future NPM asset updates should be backward compatible (rarely introduce breaking changes, if any)

NPM Assets - Before

dist/
    scripts/
        helix-ui.browser[.min].js # [1]
        helix-ui.es.js            # [2]
        helix-ui.js               # [3]
    styles/
        helix-ui[.min].css
  1. helix-ui.browser[.min].js (browser only, ES5 + UMD)
  2. helix-ui.es.js (bundlers only, ES6 + ESM)
    • should be ES5 syntax
    • not compatible with bundlers (retains ES6 syntax, doesn't work in IE)
  3. helix-ui.js (bundlers only, ES6 + CJS)
    • should be ES5 syntax
    • not compatible with bundlers (retains ES6 syntax, doesn't work in IE)

NPM Assets - After

  • Directories renamed to support shipping additional various asset types in the future
    • maybe SCSS, JSON, SVG, etc.
dist/
    js/
        helix-ui.cjs.js          # legacy bundlers
        helix-ui.esm.js          # modern bundlers
        helix-ui[.min].js        # IE11 + evergreen browsers
        helix-ui.module[.min].js # evergreen browsers only
    css/
        helix-ui[.min].css
node_modules/
    @webcomponents/
        webcomponentsjs/...
  1. helix-ui.cjs.js (ES5 + CJS)
    • bundlers only
    • defines "HelixUI" as module.exports = { ... } (can name app const whatever you want)
    • custom-elements-es5-adapter.js baked in
    • webpack compatible
  2. helix-ui.esm.js (ES5 + ESM)
    • bundlers only
    • defines "HelixUI" as export default ... (can name import whatever you want)
    • custom-elements-es5-adapter.js baked in
    • webpack compatible
  3. helix-ui[.min].js (ES5 + UMD)
    • browser only
    • defines global HelixUI namespace/variable
    • custom-elements-es5-adapter.js baked in
  4. helix-ui.module[.min].js (ES6 + ESM)
    • modern/evergreen browsers only (good for prototyping)
    • defines "HelixUI" as export default ... (can name import whatever you want)

NPM Assets - Web Components Polyfills

🆕 Web Component polyfills (v2.x) are now included as a bundled NPM dependency to help ensure that polyfills work as well for your app as they do for our documentation.

  • Old Path: node_modules/@webcomponents/webcomponentsjs/
  • New Path: node_modules/helix-ui/node_modules/@webcomponents/webcomponentsjs/

NOTE: Unlike the ES5 adapter, you still need to load webcomponents-loader.js via <script> in your HTML. The loader cannot be bundled, due to its designed functionality. Were it to be bundled, required polyfills would load after they're needed.

v1 Polyfills

⚠️ If you are currently using v1.x polyfills, you can still continue to install them as a separate dependency. However, we highly recommend that you consider using the bundled polyfills. The v1 polyfills are bloated (ships more polyfills than necessary) and difficult to consume using modern browser loading strategies (async/await, promises, deferred script loading, etc.).

HelixUI.initialize()

  • 🆕 HelixUI.initialize() now returns a then-able Promise!
    • async/await compatible
    • gives full control over when to run business logic that depends on HelixUI being fully loaded

Examples

then-able Promise:

import HelixUI from 'helix-ui';

function start () {
    // bootstrap application here...
}

HelixUI.initialize().then(start);

async/await:

import HelixUI from 'helix-ui';

async function start () {
    await HelixUI.initialize();
    // bootstrap application here...
}

start();

Search Component

The Search component has been modified to behave similar to other basic form controls (allowing more control around handling various user-generated events).

Search - Before

<hx-search
  [disabled]
  [invalid]
  [onBlur="handleBlur"]
  [onClear="handleClear"]
  [onFocus="handleFocus"]
  [onInput="handleInput"]
  [placeholder="Placeholder Text"]
  [value="search value"]
></hx-search>

Search - After

<hx-search-control
  [class="hxInvalid"]
>
  <input 
    id="searchID" 
    type="search"
    [disabled]
    [onBlur="handleBlur"]
    [onFocus="handleFocus"]
    [onInput="handleInput"]
    [required]
  />

  <button 
    aria-label="Clear search"
    class="hxClear"
    hidden
    type="button"
    [onClick="handleClear"]
  >
    <hx-icon type="times"></hx-icon>
  </button>

  <hx-search></hx-search>

  <label 
    for="searchID"
    [class="hxRequired | hxOptional"]
  >...</label>
</hx-search-control>

Refactoring for the Future

We've been busy refactoring the entire project to support future updates to HelixUI. These tasks directly support three initiatives.

  1. Support efficient module importing via webpack workflows (see #315)
    • Stakeholders will be able to take advantage of dead-code elimination (a.k.a, tree shaking) in order to reduce the amount of resources needed to run their applications.
  2. Unblock development of HelixReact
    • We want to enable our React stakeholders to come together and build awesome React components that wrap HelixUI functionality. Specifically, we want to centralize the workarounds needed to make React play well with custom elements.
  3. Add some much-needed automated testing.
    • This should enable us to release features with higher quality, fewer bugs, and hopefully at a faster pace.
    • Automated testing coming soon to improve stability.

While we've made a lot of progress towards these initiatives, there's still work to be done, so stay tuned for upcoming releases.

Merged

Assets 2
Loading