Forem: Fabian Andres Cano

Working with Nx.dev using React, Angular and native web components (Part 2 of 9)

Fabian Andres Cano — Mon, 11 May 2020 15:35:22 +0000

A complementary tutorial on how to work with Nx.dev using web components and not die trying.

Code available in GitHub

Find me on Twitter as @Fabian0007

Angular App and web components libraries created with React— Part #2 of 9

In this second part of the tutorial, we will work with the Angular application
created in the first part and this time we will create a web component library
using React. The first part of this tutorial is here.

Creating a web component library using React

We will start by adding the React capabilities, then we will create the first
web component library using React in our project:

npm i @nrwl/react

npm run nx g @nrwl/react:lib header-lib

Adding to the Angular app

The first thing that comes to mind is to add the import in
/apps/angularapp/src/main.ts:

import '@tutorial/header-lib';

Now we will run:

npm start angular app --watch

An error will appear on our console:

ERROR in libs/header-lib/src/index.ts:1:15 — error TS6142: Module ‘./lib/header-lib’ was resolved to ‘C:/Users/FCano/Documents/personal-tutorials/test-continuing/tutorial/libs/header-lib/src/lib/header-lib.tsx’, but ‘ — jsx’ is not set.

1 export * from ‘./lib/header-lib’;

We need to enable the jsx option. TypeScript ships with three JSX modes:
preserve, react, and react-native. These modes only affect the emit stage - type checking is unaffected. The preserve mode will keep the JSX as part of the output to be further consumed by another transform step (e.g.
Babel). Additionally the output will have a .jsx file
extension. The react mode will emit React.createElement, does not need to go through a JSX transformation before use, and the output will have a .js file extension. The react-native mode is the equivalent of preserve in that it keeps all JSX, but the output will instead have a .js file extension[1]. For our case we will use the reactoption. you must add the code marked in bold to /apps/angularapp/src/tsconfig.json:

{

    "extends": "../../tsconfig.json",

    "compilerOptions": {

        "types": ["node", "jest"],



    }

}

An new error will appear on our console:

ERROR in libs/header-lib/src/lib/header-lib.tsx:1:19 — error TS2307: Cannot find module ‘react’.

1 import React from ‘react’;

This is very simple, without having React installed, how are we going to work
with a React application? An alternative to not having to install it would be to
compile our library from the outside and add it as a resource, but that would
complicate updating this library and that is not the idea of a monorepo. We
will install React and react-dom(Since we are working with a web application, we need to install the glue between react and the DOM) by executing the following command:

npm install react react-dom

And of course we need to install the types for these packages since we are using Typecript.

npm install — save-dev @types/react @types/react-dom

The error will disapper and we will replace the file
/apps/angularapp/src/app/app.component.html with:

<header-lib></header-lib>

<main></main>

<template id="template-test" [innerHTML]="template"> </template>

<footer-lib [attr.creator]="creator"></footer-lib>

Expected result

Our header library will not be shown, and it is obvious, we are calling a web
component that does not exist, what we have for now is a React library, to make it a web component we have two options each with its own advantages and disadvantages.

Do it yourself

React and Web
Components are built to solve different problems. Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both[2]. Our need at the moment is to encapsulate the react library that we already have in a web component.

First we will change the name of /libs/footer-lib /src/lib/header-lib.tsx to
ReactHeader.tsx and we will replace the content with:

import * as React from ‘react’;

import ‘./header-lib.css’;

/* eslint-disable-next-line */

export interface ReactHeaderProps {}

  export const ReactHeader = (props: ReactHeaderProps) => {

    return (

      <div>

        <h1>Welcome to header-lib component!</h1>

      </div>

    );

};

export default ReactHeader;

Now we will create on the same folder the file header-lib.tsx and will replace
with:

import * as React from 'react';

import * as ReactDOM from 'react-dom';

import { ReactHeader } from './ReactHeader';

export class HeaderLib extends HTMLElement {

  public mountPoint: HTMLDivElement;

  connectedCallback() {

    this.mountReactApp();

  }

  disconnectedCallback() {

    ReactDOM.unmountComponentAtNode(this.mountPoint);

  }

  mountReactApp() {

    if (!this.mountPoint) {

      this.mountPoint = document.createElement('div');

      this.appendChild(this.mountPoint);

    }

    ReactDOM.render(<ReactHeader />, this.mountPoint);

  }

}

customElements.define('header-lib', HeaderLib);

Here we are using the life cycle of the web components (connectedCallback and disconnectedCallback) and ReactDOM for render a React component over a web component.

Expected result

Our component not is using the ShadowDOM(see the first part of this tutorial), so the h1 label is centered. To use it we must add the constructor and we will attach a shadow DOM tree to the web component “this.attachShadow({ mode: ‘open’})”, it must be open because we need to access to shadowRoot property of the web component, then we must to append the div element to the shadowRoot property instead of over the web component.

constructor() {

  super();

  this.attachShadow({ mode: 'open' })

}

this.appendChild(this.mountPoint); -> this.shadowRoot.appendChild(this.mountPoint);

Expected result

Now if we want to add the style, we need to add it as a inline style, because
the shadowDOM doesnt we permit to use the external css, we can to use
style-it for insert the css directly
in the DOM, but we need to be able to export the css as a module, so I invite
you to review this on your own.

import * as React from 'react';

import './header-lib.css';

/* eslint-disable-next-line */

export interface ReactHeaderProps {}

export const ReactHeader = (props: ReactHeaderProps) => {

  return (









    </div>

  );

};

export default ReactHeader;

Now if we want to pass a parameter, the first is update the React component:

import * as React from 'react';

import './header-lib.css';

/* eslint-disable-next-line */

export interface ReactHeaderProps {

  creator: string

}

export const ReactHeader = ({ creator }: ReactHeaderProps) => {

  return (

    <div style={display: 'flex', alignItems: 'center', justifyContent: 'center'}>

      <img

        alt="Nx logo"

        width="75"

        src="https://nx.dev/assets/images/nx-logo-white.svg"

      />

      <h1>Header {creator}</h1>

    </div>

  );

};

export default ReactHeader;

In header-lib.tsx we must add the attributeChangedCallback lifecycle to get the attribute “creator” and pass it to the mountReactApp function where we will pass that value to the React component.

import * as React from 'react';

import * as ReactDOM from 'react-dom';

import { ReactHeader } from './ReactHeader';

export class HeaderLib extends HTMLElement {

  public mountPoint: HTMLDivElement;

  public static observedAttributes = ['creator'];

  constructor() {

    super();

    this.attachShadow({ mode: 'open' })

  }

  connectedCallback() {

    this.mountReactApp('');

  }

  attributeChangedCallback() {

    const creator: string = this.getAttribute('creator');

   this.mountReactApp(creator);

  }

  disconnectedCallback() {

    ReactDOM.unmountComponentAtNode(this.mountPoint);

  }

  mountReactApp(creator: string) {

    if (!this.mountPoint) {

      this.mountPoint = document.createElement('div');

      this.shadowRoot.appendChild(this.mountPoint);

    }

   ReactDOM.render(<ReactHeader creator={creator}/>,   this.mountPoint);

  }
}

customElements.define('header-lib', HeaderLib);

Finally we will need to update the app.component.html in angularApp:

<header-lib [attr.creator]="creator"></header-lib>

<main></main>

<template id="template-test" [innerHTML]="template"> </template>

<footer-lib [attr.creator]="creator"></footer-lib>

Expect result

The fast way

We will create a new library for test this way:

npm run nx g @nrwl/react:lib header-fast-lib

We will install these dependencies:

npm i prop-types
npm i react-to-webcomponent

We will create ReactHeader en lib of header-fast-lib:

import * as React from 'react';

import * as PropTypes from 'prop-types';

/* eslint-disable-next-line */

export interface ReactHeaderProps {

  creator: string

}

export const ReactHeader = ({ creator }: ReactHeaderProps) => {

  return (

    <div style={display: 'flex', alignItems: 'center', justifyContent: 'center'}>

      <img

        alt="Nx logo"

        width="75"

        src="https://nx.dev/assets/images/nx-logo-white.svg"

      />
      <h1>Header {creator}</h1>

    </div>

  );

};

ReactHeader.propTypes = { creator: PropTypes.string };

export default ReactHeader;

The only change here regarding header-lib is “ReactHeader.propTypes = { creator: PropTypes.string };” because react-to-webcomponent need it. Now inside header-fast-lib.tsx we will write:

import * as ReactDOM from 'react-dom';

import * as React from 'react';

import reactToWebComponent from 'react-to-webcomponent';

import { ReactHeader } from './ReactHeader';

export const webcomponent = reactToWebComponent(ReactHeader, React, ReactDOM);

customElements.define('header-fast-lib', webcomponent);

Inside main.ts of angularApp we will include the library and in
app.component.html we will use instead of :

import '@tutorial/header-fast-lib';

<header-fast-lib [attr.creator]="creator"></header-fast-lib>

Expected result

As we have seen working web components with React is not complicated, and most of the things we knew from the previous tutorial where we work with native web components are applied, in the next part of this tutorial we will work with web components built with Angular, see you soon.

Referencias

[1]
https://www.typescriptlang.org/docs/handbook/jsx.html

[2]
https://en.reactjs.org/docs/web-components.html

Working with Nx.dev using React, Angular and native web components (Part 1 of 9)

Fabian Andres Cano — Mon, 11 May 2020 15:30:09 +0000

Code available in GitHub

Find me on Twitter as @Fabian0007

Angular App and web components libraries— Part #1 of 9

In this first part of the tutorial, we will start with an Angular application
that uses web component libraries, we will delve a little into what web
components are and the peculiarities of Angular when working with them.

Let’s start creating the Nx project:

npx create-nx-workspace tutorial

Then select empty [an empty workspace]

Now surely, are you wondering what is Nx? (better to look for it as Nx.dev).
This set of extensible development tools for monorepos could help you develop like Google, Facebook and Microsoft[1]. For more information about Nx you can consult their website. What to say about the monorepos strategy, is a subject of much discussion, I recommend that you consult information about its advantages and disadvantages.

Creating Angular App

We will start by adding the Angular capabilities, then we will create the first
application in our project, which will use Angular:

npm i @nrwl/angular

npm run nx g @nrwl/angular:app angularapp

Which style sheet format(to use) and if you want to configure routing for the
application is your choice.

Creating a web component library

Now, we will add the Web component capabilities and create a footer library
based on web components:

npm i @nrwl/web
npm run nx g @nrwl/web:lib footer-lib

Go to /libs/footer-lib /src/lib/footer-lib.ts and we must to add:

export class Footer extends HTMLElement {

  connectedCallback() {
    this.innerHTML = `<h1>Made by Fabian Cano</h1>`;
  }
}
customElements.define('footer-lib', Footer);

Three importants things here:

HTMLElement: this is the prototype of a generic element HTML.

connectedCallback: A lifecycle hook called after the component’s element is
inserted into the document.

customElements.define: is a method that defines a new custom element.

At this point it is important to talk about what web components are. They are
not a technology per se, they are based on the combined use of four technologies that can be used independently:

The first is Custom Elements, **which allows defining new types of elements and is used when we call customElements.define(‘footer-lib’, Footer)**.

The second was HTML Imports, which is intended to be the packaging mechanism for web components, but you can also use HTML Imports by itself. This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

The previous technology was replaced with the ES Modules specification, which defines the inclusion and reuse of JS documents in a standards based, modular, performant way. This is how we will import our web component.

We will see the other two technologies later.

Adding the web component library to the Angular app

Go to /apps/angularapp/src/main.ts and we will add (here we use ES modules):

import '@tutorial/footer-lib';

Then in /apps/angularapp/src/app/app.module.ts we will add the code in bold, in order to enable the use of web components in the project.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, 
 } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [AppComponent],

  imports: [BrowserModule],

  providers: [],


  bootstrap: [AppComponent]

})
export class AppModule {}

We will add the next to the end of the file
/apps/angularapp/src/app/app.component.html, in order to call the web component.

<footer-lib></footer-lib>

Then, you can run the app:

npm start angularapp

If you get the error “Cannot find module
‘@angular-devkit/build-angular/package.json’…”, run the command below to reinstall dependencies:

npm i

Expected result

You can see that the style defined in app.component.css does not affect the
footer-lib style. This occurs because Angular by default uses encapsulation
for components. For deactivate this, you must add the code marked in bold to app.component.ts:

import { Component, 
 } from '@angular/core';

@Component({

  selector: 'tutorial-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],



})

export class AppComponent {

  title = 'angularapp';

}

Now footer-lib will be centered because it uses h1 label.

Expected result

What if you want to pass a parameter to the web component? you can use
observedAttributes and attributeChangedCallback provided by HTMLElement, replace
the file in /libs/footer-lib /src/lib/footer-lib.ts with:

export class Footer extends HTMLElement {

  public static observedAttributes = ['creator'];

  attributeChangedCallback() {

    const creator = this.getAttribute('creator');

    this.innerHTML = `<h1>Made by ${creator}</h1>`;

  }

}

customElements.define('footer-lib', Footer);

Now we should pass the parameter to footer-lib and create the variable in
app.component.ts:

<footer-lib [attr.creator]="creator"></footer-lib>

...
title = 'angularapp';

...

What if you want encapsulate the footer-lib style but without relying on
Angular encapsulation? For this you can use the Shadow DOM.

Using the Shadow DOM

Shadow DOM is the third technology on which web components are based and is a new DOM feature that helps you build components. You can think of shadow DOM as a scoped subtree inside your element. it was created to allow encapsulation and componentisation natively on the web platform without having to rely on tools like <iframe>, which really weren’t made for this purpose.

Go to /libs/footer-lib /src/lib/footer-lib.ts and we must replace it with:

export class Footer extends HTMLElement {

public static observedAttributes = ['creator'];

  constructor() {

    super();

    this.attachShadow({ mode: 'open' });

  }

  attributeChangedCallback() {

    const creator = this.getAttribute('creator');

    const template = document.createElement('template');

    template.innerHTML = `<h1>Made by ${creator}</h1>`;

    this.shadowRoot.appendChild(template.content);

  }

}

customElements.define('footer-lib', Footer);

Now again, you can see that the style defined in app.component.css does not
affect the footer-lib style because it uses shadow DOM.

Expected

Using HTML templates

HTML templates are the fourth technology on which web components are based and they allow you to create pieces of HTML that can be replicated as many times as necessary.

Go to /libs/footer-lib /src/lib/footer-lib.ts and we must replace it with:

export class FooterLib extends HTMLElement {

  public static observedAttributes = ['creator'];

  constructor() {

    super();

    this.attachShadow({ mode: 'open' });

  }

  attributeChangedCallback() {

    const template = document.getElementById('template-test');

    template.innerHTML =

      `<style>h1 {text-align: center; }</style>` + template.innerHTML;

    const templateContent = template['content'];

    this.shadowRoot.appendChild(templateContent);

  }

}

customElements.define('footer-lib', FooterLib);

Here we get the template searching with the id ‘template-test’, then we add the style for center the h1 label in the innerHTML of the template. Finally we add the template[‘content’] as a child of the shaddowRoot.

Now we need to add the template to /apps/angularapp/src/app/app.component.html:

<template id="template-test" [innerHTML]="template"> </template>

Then go to /apps/angularapp/src/app/app.component.ts and you must add the code marked in bold:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({

selector: 'tutorial-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

encapsulation: ViewEncapsulation.None

})

export class AppComponent {

title = 'angularapp';

creator = 'Fabian Cano';


}

Expected result

In the next part we will see the inclusion of a React library to the Angular
application. See you soon.

Second part available here

References

[1] Nx web page https://nx.dev/