d123-gap-events-web v0.1.4

Gap Events Web

Development guidelines

Local development

npm i

Setup environment

Create .env.local file at the project root. Set env variables for the project. See list of required variables at .env.sample

VITE_AUTH_TOKEN=
VITE_API_URL=
# other variables

npm run dev

Commits

Project setup has a pre commit hooks.

• commit message - all commit messages should follow the Conventional Commit guidelines
• lint - automatically runs eslint check before commit

Publish flow

Package publish steps:

npm run build
npm run release
git push --follow-tags origin $(git branch)
npm publish

Connect App as Web Component

npm i --save @gap/gap-events-web

Angular

Main Router

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageComponent } from './Page/page.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: PageComponent
  },
  {
    // Needs to provide base url `/events` for the web component below (see `base-url` atttribute) 
    path: 'events',
    loadChildren: () => import('./Events/events.module').then(m => m.EventsModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

events routing module

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { EventsComponent } from './events.component';

@NgModule({
  imports: [RouterModule.forChild([{
    // handle any nested route to web component
    path: '**',
    component: EventsComponent
  }])],
  declarations: [
    EventsComponent
  ],
  schemas: [
    // Use custom schema to allow put web component
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class EventsModule {

}

EventsComponent. Inject App as web component

import { Component } from '@angular/core';
import { GapEvents } from '@gap/gap-events-web';

// Define web component
window.customElements.get('gap-events') || window.customElements.define('gap-events', GapEvents);

@Component({
  template: `
    <div >
      <button (click)="changeToken()">Change token</button>
    </div>
    <gap-events [attr.auth-token]="token" base-path="/events" api-url="http://localhost"></gap-events>
  `
})
export class EventsComponent {

  public token = 'TOKEN_VALUE';

  public changeToken() {
    this.token = `RANDOM_TOKEN_${Math.random()}`;
  }

}