Advanced REST client application: Using Polymer web components in React application

Today I've released a first version of the node module to wraps Polymer powered web components into React component.

The wc-reactor module takes a web component declaration (source code) and uses Polymer analyzer to get information about the component. Finally it creates a bridge between React and web platform so you can use any Polymer web component in a React application as if it is a React component.

By default the module generates the interface for every web component defined in the source file and its dependencies. The input file can be Polymer build file (bundle file that concatenates many web components). In that case all components are analyzed and wrapped into React components.
You can tell the module to limit number of generated wrappers by specifying a list of web components names that will be used to generate the wrappers.

Example usage

const reactor = require('wc-reactor');

reactor({
  webComponent: 'bower_components/paper-input/paper-input.html',
  dest: './out',
  bundle: false,
  reactComponents: ['paper-input']
});
.then(() => console.log('Build complete');

This use of the module generates PaperInput/PaperInput.js React component that is the interface for React application. The interface allows you to set properties on the web component, handle custom events by setting event handler functions as the component property and call public API functions.

/**
 * Handles value change event of the paper-input web component
 */
_onValueChanged(newValue, e) {
  e.preventDefault();
  console.log(newValue);
}
 
render() {
  return (
    <paperinput label="User name" name="username" onValueChanged="{this._onValueChanged}/" required="{this.props.required}">
  );
}

Note that you still have to import the web component into your application. This module does not recreates the web component for React but creates the interface for React application to communicate with web component.

Bundling ARC web components and generating React components

Another module released today is the arc-components-builder that creates a bundle file of web components (single import file). The module can be used to create a build of ARC or any Polymer powered web components. It handles dependencies installation, source analysis and bundling using Polymer tools under the hood.
This module also uses wc-reactor to generate a React interface for the build file.

const builder = require('arc-components-builder');
 
builder({
  // Any web component, it can contain version declaration
  webComponents: [
    'PaperElements/paper-input#1.0.0',
    'vaadin/vaadin-button'
  ],
  // Any ARC component, it also can contain version declaration
  // but doesn't require Github path
  arcComponents: [
    'content-type-selector',
    'paper-combobox',
    'headers-editor',
    'http-method-selector',
    'url-input-editor'
  ],
  // Creates React wrapper
  react: true,
  // Create React interface for the following components only.
  reactComponents: ['url-input-editor']
})
.then(() => console.log('Build complete');

This command creates a bundle import file of following components:

paper-input
vaadin-button
content-type-selector
paper-combobox
headers-editor
http-method-selector
url-input editor
... any any dependency of this elements

Finally it creates a React wrapper for url-input-editor (as React's UrlInputEditor component).

The output directory contains import.html file with the bundle of web components that should be included into the application. It can be done manually by referencing the file.

<link rel="import" href="import.html">

For react applications the wc-reactor module generates a helper file that contains functions to add a polyfill script and to import link declaration to your document:

import { polyfillScript, componentsImport } from './WebComponentsImports';
var doc = `<html>
  <head>
    ...
    ${polyfillScript('/base-path')}
    ${componentsImport('/base-path', 'import.html')}
  </head>
  <body></body>
</html>`

I'll be happy to hear a feedback from you. If you have an idea or a use case that is not covered by the module, please leave a comment or create a feature request on Github.

Advanced REST client application

Tuesday, 5 December 2017

Using Polymer web components in React application

Bundling ARC web components and generating React components

11 comments: