Tuesday 5 December 2017

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.

11 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion.half day leave application for urgent work

    ReplyDelete
  7. Positive site, where did u come up with the information on this posting? I'm pleased I discovered it though, ill be checking back soon to find out what additional posts you include. Polyimide grades

    ReplyDelete
  8. Gangaur Realtech is a professionally managed organisation specializing in real estate services where integrated services are provided by professionals to its clients seeking increased value by owning, occupying or investing in real estate. diseñador de páginas web

    ReplyDelete