Build Your Own JavaScript Micro-Library Using Web Components: Part 2/4

, a micro-library helps developers implement common features more quickly than using the web APIs directly. Now in this tutorial, we will code our 

 that allows our classes to instantly gain new features without writing the code for them every time. 

The class decorator eliminates boilerplate and allows users of the micro-library to focus on higher-level concepts while delegating common class setups to the micro-library.

Implementing a class decorator is going to significantly improve the developer experience, allowing developers to code Web Components faster. We'll enhance the class-based implementation which custom elements rely on by cleaning up each 

Specifically, we move the declaration of an HTML template and CSS to a new 

. This, combined with abstracting template and style generation to a reusable 

, will have the positive effect of reducing the boilerplate for each component. Here's an example of what a typical component will look like when it uses the decorator in our micro-library. This 

 will now look something like the following.

@Component({
  custom: { extends: "button" },
  selector: "in-button",
  style: buttonStyles,
})
export class ButtonComponent 
  extends HTMLButtonElement {
  constructor() {
    super();
  }
  connectedCallback() {
    this.classList.add("in-button");
    attachStyle(this);
  }
}

We'll use a mono-repo structure for this project. So, create a 

. To keep this package organized, we should figure out a way to divide the code into logical chunks. Making a directory for all decorators seems prudent, then organizing the decorators by function.

To start developing the component decorator, create a new directory in 

packages/common/src/decorator/component.ts

mkdir -p packages/common/src/decorator
touch packages/common/src/decorator/\
index.ts
touch packages/common/src/decorator/\
component.ts

 manages exports for several files in the same directory. Other files in a directory contain library code.

First, let's define the interface used by the component decorator. This keeps the first argument of the decorator 

export interface ElementMeta {
  selector?: string;
  style?: string;
  template?: string;
}

. All three properties are optional, denoted by the 

TypeScript class decorators are factory functions, that is, they return a 

 definition of the component using this decorator. Based on the values of properties on the 

 so we can use those properties to register the component with the 

 and instantiate an HTML template with Shadow DOM.

export function Component(
  meta: ElementMeta
) {
  return (target: any) => {
    return target;
  };
}

Let's put a fail-safe mechanism in for users who haven't specified an 

export function Component(
meta: ElementMeta
) {
  if (!meta) {
    console.error(
      "Component must include 
      ElementMeta to compile");
    return;
  }

 and when truthy, displays a console error for developers in Dev Tools, then aborts the rest of the algorithm that depends on 

We have two objectives for the class decorator: register the component using the 

 definition to later append an HTML template to Shadow DOM using the 

Let's start with registering the component via the decorator function. In the factory function, reference the 

 and pass it and the class definition, here named 

export function Component(
  meta: ElementMeta
) {
  if (!meta) {
    console.error(
      "Component must include 
      ElementMeta to compile"
    );
    return;
  }
  return (target: any) => {
    customElements.define(
      meta.selector,
      target
    );
    return target;
  };
}

This allows the end-user to omit a call to 

 in their implementation. The user has the option to ignore 

if (meta.selector) {
  customElements.define(
    meta.selector,
    target
  );
}

Class decorators are a place where you can modify the 

, so that's exactly what we're going to do. We're going to store the 

, here is a good place for some conditionals that set each of these properties to an empty 

if (!meta.style) {
  meta.style = "";
}
if (!meta.template) {
  meta.template = "";
}

export function Component(
  meta: ElementMeta
) {
  if (!meta) {
    console.error(
      "Component must include 
      ElementMeta to compile"
    );
    return;
  }
  return (target: any) => {
    if (!meta.style) {
      meta.style = "";
    }
    if (!meta.template) {
      meta.template = "";
    }
    target.prototype.elementMeta = meta;
    if (meta.selector) {
      customElements.define(
        meta.selector,
        target
      );
    }
    return target;
  };
}

 decorator is finished, but you still need to provide the decorator and the 

To finalize development of the decorator, add the proper exports to

export { 
  Component 
} from "./component";
export type { 
  ElementMeta 
} from "./component";

export { 
  Component 
} from "./src/decorator";
export type { 
  ElementMeta 
} from "./src/decorator";

 package is built, other packages in the monorepo will be able to reference anything exported from the 

Check the build successfully runs, which means your TypeScript is valid. 

lerna exec --scope @in/common \
-- yarn build

 make sure lerna is installed globally and try the build command again.

 output in the Terminal, you are ready to proceed. Otherwise, check your TypeScript is correct.

Later, we'll work with Shadow DOM and abstract its setup into the functionality of our micro-library, leaving library users with one less detail to worry about.

For more about Web Components, check out our latest book 

Fullstack Web Components: Complete Guide to Building UI Libraries with Web Components

AUTHOR

Steve Belovarich

As we covered in the previous tutorial, a micro-library helps developers implement common features more quickly than using the web APIs directly. Now in this tutorial, we will code our class decorator that allows our classes to instantly gain new features without writing the code for them every…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Build Your Own JavaScript Micro-Library Using Web Components: Part 2/4

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript