Build 462 has released. It includes an exciting new interop with web components (beta) and some nice new PDF and ReportViewer features. It also includes a fix for license validation in older versions of Chrome.
Angular 6
As we already announced, Wijmo supports Angular version 6.0.0. We're still working on upgrading all our samples to Angular version 6 and our TypeScript version to 2.7. A future release will include those.
We also have an interesting blog about using Wijmo with Angular Elements: Angular 6 Support blog | Exploring Wijmo with Angular Elements blog
Wijmo controls as web components
This build introduces a beta version of the Wijmo web components interop, which exposes Wijmo controls as web components, or more specifically as custom elements. Wijmo web components allows you to declaratively add Wijmo controls to HTML page, and manipulate them as usual DOM elements, without the use of any additional framework. Some browsers that don't fully support web components standards may require some additional polyfills.
If you're not familiar with web components, here's a good introduction to this technology.
The key aspects of the current state of the Wijmo web components implementation:
Wijmo "top-level" web components that represent Wijmo controls, like wjc-flex-grid component representing FlexGrid control, are inherited from the corresponding control classes. For example, WjcFlexGrid component class extends FlexGrid control class. This also means that the base Wijmo Control class extends the HTMLElement class when Wijmo is used in the "web components mode".
Child components that are complementary to top-level components, like wjc-flex-grid-column components that define FlexGrid columns, function as wrappers over Wijmo classes they represent. Child components are directly inherited from the HTMLElement class, and the underlying Wijmo class instance is accessible via the special control property of the component.
Wijmo class properties can be defined using attributes on the component element. When the attribute value changes, the corresponding Wijmo class property is updated accordingly. Changing the class property value doesn't entail changing of the corresponding attribute value. This probably can be changed in the future, but right now we have not decided whether it's necessary.
JavaScript code can subscribe handlers to Wijmo control events using native Element.addEventListener('event', handler) method.
Wijmo components don't use Shadow DOM now. This will be addressed in future versions of the interop. One of the challenges here is that Wijmo allows deep customization of its control's parts via CSS, whereas the goal of Shadow DOM is to prevent it. There are new proposals to the Shadow DOM specification that can mitigate this limitation. We continue to keep track of the changes. For now, Wijmo web components and their parts can be customized in the same way as ordinary Wijmo controls, using global CSS.
One of the benefits of web components is that the same component can be used in different frameworks and benefit from the frameworks’ additional capabilities like attribute, property, and event bindings.
For now, we added the Web Components In Angular sample that demonstrates how to use Wijmo web components in an Angular application. Samples for other popular frameworks like React, Vue, Polymer, and others are on the way.
Please send us feedback while our WebComponent interop is in beta: Web Components Intro sample | Web Components In Angular sample
ECMAScript 6
We have also added ES6 versions of Wijmo modules (Beta version), which you can find in the NpmImages folder of Wijmo download zip:
- wijmo-es2015-esm-min – in ESM module format (ES6 import/export statements)
- wijmo-es2015-commonjs-min – in CommonJS module format
We will be continuing to research and develop our ES6 support this year. Feedback here is also welcome.
Change Log
- [Web Components] Added Beta version of the web components interop (wijmo.webcomponents.xxx.js modules). The Samples\TS\WebComponents\WebComponentsIntro sample explains the status and usage of the interop. Web Components Intro sample
- [Web Components] Added a sample that demonstrates how to use Wijmo web components in an Angular application. Web Components In Angular sample
- [licensing] Added a wijmo.setLicenseKey method that enables single-build deployment, including npm. If the licenseKey is not set, Wijmo runs in evaluation mode (with a watermark). Setting the licenseKey (keys are provided to customers on our site) causes Wijmo to run in production mode (no watermark). Read more about Wijmo licensing | How to deploy a Wijmo app with distribution licensing blog
- [licensing] Fixed issue of license validation in older versions of Chrome.
- [npm] Wijmo is published to the global npm registry as the 'wijmo' package. Read the blog on Wijmo and NPM
- [Angular] Disabled state of Wijmo components inside Angular forms now changes on the Angular AbstractControl.disable()/enable() method calls.
- Added Beta version of Wijmo npm image with ES2015 (ES6) code in CommonJS module format, in the NpmImages/wijmo-es2015-commonjs-min folder.
- Added Beta version of Wijmo npm image with ES2015 (ES6) code, in the NpmImages/wijmo-es2015-esm-min folder.
- [wijmo.pdf] Moved to PDFKit 0.8.3.
- [wijmo.pdf] PdfPageArea.openImage() method added.
- The PdfExport samples have been updated to use openImage() method to get the actual image sizes when drawing cells manually.
- [ReportViewer] Added support for new properties of string parameters, maxLength and allowBlank.
- PivotGrid now honors the allowDragging property and allows users to reorder the row fields by dragging their column headers.
- Optimized the FlexGrid.autoSizeRows method.
New Samples
Breaking Changes
- [NpmImages] Npm image with modules in System format is abolished. This module format makes sense only in conjunction with the SystemJS run-time loader, but the latter is capable to load modules in CommonJS format, so there is no need to ship a separate System npm image.
Get Build 5.20181.462 now
Chris Bannon