@rxdi/starter-client-lit-html v0.7.37

@rxdi/starter-client-lit-html

Starter project with graphql, lit-html, apollo-boost, @vaadin/router, @webcomponents/custom-elements based on @rxdi/core

Powerful Dependency Injection inside Browser and Node using Typescript and RXJS 6

The idea behind @rxdi is to create independent, dependency injection that can be used everywhere, Node and Browser with purpose also to share the same code without chainging nothing! First steps where with platform called @gapi you can check repository @gapi/core. Then because of the needs of the platform i decided to develop this Reactive Dependency Injection container helping me build progressive applications. Hope you like my journey! Any help and suggestions are appreciated! Main repository @rxdi/core

---

Demo Application

Installation and basic examples:

To start developing, run:

git clone https://github.com/rxdi/starter-client-lit-html

Install modules:

npm install

Optional

Using VSCode there are extensions helping productivity with lit-html

lit-plugin

code --install-extension runem.lit-plugin

lit-html

code --install-extension bierner.lit-html

Using @gapi/cli schematics

npm i -g @gapi/cli

gapi generate [name] generates the specified schematic

Available Schematics:

• component
• directive
• guard
• module
• provider
• service

Options

--dry-run (alias: -d)

--force (alias: -f)

Current settings for schematics are defined inside gapi-cli.conf.yml Information can be found here

config:
  schematics:
    name: @rxdi/schematics
    dryRun: false

Running App

For starting and building application we will use Parcel a new configuration-less web bundler ParcelJS

To install parcel type:

npm install -g parcel-bundler

Start App

parcel ./src/index.html

Build App

parcel build ./src/index.html

Simplest app

Main starting point

src/main.ts

import { Bootstrap } from '@rxdi/core';
import { AppModule } from './app/app.module';

window.addEventListener('load', () => {
  Bootstrap(AppModule, {
    init: false,
  }).subscribe(() => console.log('App Started!'), err => console.error(err));
});

if (module['hot']) {
  module['hot'].dispose(() => (document.body.innerHTML = ''));
}

App Module

src/app/app.module.ts

import { Module } from '@rxdi/core';
import { GraphqlModule } from '@rxdi/graphql-client';
import { RouterModule } from '@rxdi/router';
import { DOCUMENTS } from './@introspection/documents';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { Components } from './shared/components';
import { State } from './app.state';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';

@Module({
  components: [
    NavbarComponent,
    HomeComponent,
    FooterComponent
  ],
  imports: [
    GraphqlModule.forRoot(
      {
        uri: 'https://questups.com/api/graphql'
      },
      DOCUMENTS
    ),
    RouterModule.forRoot<Components>([
      {
        path: '/',
        component: HomeComponent
      },
      {
        path: '/about',
        children: () => import('./about/about.module')
      },
      {
        path: '(.*)',
        component: 'not-found-component',
        action: () => import('./not-found/not-found.component')
      }
      //   { path: '/users/:user', component: 'x-user-profile' },
    ], { log: true })
  ],
  bootstrap: [AppComponent],
  providers: [State],
})
export class AppModule {}

Base component

import { Injector } from '@rxdi/core';
import { GraphqlClient } from '@rxdi/graphql-client';
import {
  QueryOptions,
  MutationOptions,
  SubscriptionOptions
} from 'apollo-boost';
import { importQuery } from '@rxdi/graphql-client';
import { DocumentTypes } from '../@introspection/documentTypes';
import { from, Observable } from 'rxjs';
import { IQuery, IMutation, ISubscription } from '../@introspection';
import { LitElement } from '@rxdi/lit-html';

export class BaseComponent extends LitElement {
  @Injector(GraphqlClient) public graphql: GraphqlClient;

  createRenderRoot() {
    return this;
  }

  query<T = IQuery>(options: ImportQueryMixin) {
    options.query = importQuery(options.query);
    return from((this.graphql.query.bind(this.graphql)(options) as any)) as Observable<{ data: T }>;
  }

  mutate<T = IMutation>(options: ImportMutationMixin) {
    options.mutation = importQuery(options.mutation);
    return from((this.graphql.mutate.bind(this.graphql)(options) as any)) as Observable<{ data: T }>;
  }

  subscribe<T = ISubscription>(options: ImportSubscriptionMixin) {
    options.query = importQuery(options.query);
    return from((this.graphql.subscribe.bind(this.graphql)(options) as any)) as Observable<{ data: T }>;
  }
}

interface ImportQueryMixin extends QueryOptions {
  query: DocumentTypes;
}

interface ImportSubscriptionMixin extends SubscriptionOptions {
  query: DocumentTypes;
}

interface ImportMutationMixin extends MutationOptions {
  mutation: DocumentTypes;
}

index.html shoud have defined body tag since app-component will be rendered inside

<body></body>

When RouterModule is set we can put our component <router-component></router-component> inside AppComponent

<router-outlet>
  <navbar-component slot="header"></navbar-component>
  <footer-component slot="footer"></footer-component>
</router-outlet>

Note! Components needs to be bootstraped inside AppModule before using them or nothing will be rendered

@Module({
  components: [
    NavbarComponent,
    FooterComponent,
    HomeComponent,
  ],
})
export class AppModule {}

Another way of importing modules is directly inside the Component import './your.component.ts';;

App Component

src/app/app.component.ts

import { Inject } from '@rxdi/core';
import { html, Component } from '@rxdi/lit-html';
import { State } from './app.state';

/**
 * @customElement app-component
 */
@Component({
  selector: 'app-component',
  template() {
    return html`
      <router-outlet>
        <navbar-component slot="header"></navbar-component>
        <footer-component slot="footer"></footer-component>
      </router-outlet>
    `;
  },
  container: document.body
})
export class AppComponent extends HTMLElement {
  @Inject(State) private state: State;
}

Navbar component

import { Router } from '@rxdi/router';
import { html, property, eventOptions, css, LitElement, Component } from '@rxdi/lit-html';

/**
 * @customElement navbar-component
 */
@Component({
  selector: 'navbar-component',
  style: css`
    .spacer {
      flex: 1 3 auto;
    }
    .container {
      display: flex;
    }
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f3f3f3;
      cursor: pointer;
    }

    li {
      float: left;
    }

    li a {
      display: block;
      color: #666;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover:not(.active) {
      background-color: #ddd;
    }

    li a.active {
      color: white;
      background-color: #4caf50;
    }
  `,
  template(this: NavbarComponent) {
    return html`
      <ul class="container">
        <li><a @click=${() => this.router.go('/')}>Home</a></li>
        <li><a @click=${() => this.router.go('/about')}>About</a></li>
        <span class="spacer"></span>
        <li><a @click=${this.onIncrement}>Increment</a></li>
        <li><a @click=${this.onDecrement}>Decrement</a></li>
        <li><a>${this.counter}</a></li>
      </ul>
    `;
  }
})
export class NavbarComponent extends LitElement {
  @property() counter = 0;

  @Router() router: Router;

  @eventOptions({ capture: true })
  onIncrement(e: Event) {
    this.counter++;
  }

  @eventOptions({ capture: true })
  onDecrement(e: Event) {
    this.counter--;
  }
}

About Component

src/app/app.component.ts

import { html, Component, async, LitElement } from '@rxdi/lit-html';
import { timer } from 'rxjs';
import { map } from 'rxjs/operators';

/**
 * @customElement about-component
 */
@Component({
  selector: 'about-component',
  template(this: AboutComponent) {
    return html`
      <header>
        <h1>About</h1>
      </header>
      ${async(this.timer)}
      <p>
        <img
          src="https://www.w3schools.com/html/pic_trulli.jpg"
          alt="Italian Trulli"
        />
      </p>
    `;
  }
})
export class AboutComponent extends LitElement {
  private timer = timer(1, 1000).pipe(map(v => v));
}

Home Component

src/app/home/home.component.ts

import { BaseComponent } from '../shared/base.component';
import {
  Component,
  OnInit,
  OnDestroy,
  OnUpdate,
  html,
  async
} from '@rxdi/lit-html';
import { timer, from } from 'rxjs';
import { map } from 'rxjs/operators';
import { Observable } from 'apollo-link';

/**
 * @customElement home-component
 */
@Component({
  selector: 'home-component',
  template(this: HomeComponent) {
    return html`
      <header>
        <h1>Hello world</h1>
      </header>
      <img
        src="https://www.w3schools.com/html/img_girl.jpg"
        alt="Italian Trulli"
      />
      <p>
        Server status ${async(this.getServerStatus)}
      </p>
      <p>${async(this.timer)}</p>
      <p>
        Crowdsale info ${async(this.getCrowdsaleInfo)}
      </p>
    `;
  }
})
export class HomeComponent extends BaseComponent implements OnInit, OnDestroy, OnUpdate {
  private timer = timer(100, 1000).pipe(map(() => new Date()));
  private getServerStatus = this.getHomeQuery().pipe(
    map(res => res.status.status)
  );
  private getCrowdsaleInfo = this.getHomeQuery().pipe(
    map(res => JSON.stringify(res.getCrowdsaleInfo, null, 4))
  );

  OnInit() {
    console.log('Home component init');
  }

  OnDestroy() {
    console.log('Home component destroyed');
  }

  OnUpdate() {
    console.log('Home component updated');
  }

  subscription() {
    return this.subscribe({ query: 'home.subscription.graphql' });
  }

  getHomeQuery() {
    return this.query({ query: 'home.query.graphql' }).pipe(
      map(res => res.data)
    );
  }
}

Home Graphql queries

Batch of getCrowdsaleInfo and status queries

query {
  status {
    status
  }
  getCrowdsaleInfo {
    startTime
    endTime
    hasEnded
    token
    weiRaised
    wallet
  }
}

subscribeToUserMessagesBasic

subscription {
  subscribeToUserMessagesBasic {
    message
  }
}

Footer component

import { html, css, Component } from '@rxdi/lit-html';

/**
 * @customElement footer-component
 */
@Component({
  selector: 'footer-component',
  useShadow: true,
  style: css`
    .footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: #03a9f4;
      color: white;
      text-align: center;
    }
  `,
  template() {
    return html`
      <div class="footer">
        <p>Footer</p>
      </div>
    `;
  }
})
export class FooterComponent extends HTMLElement {}

Not fund component

import { html, Component } from '@rxdi/lit-html';

/**
 * @customElement not-found-component
 */
@Component({
  selector: 'not-found-component',
  useShadow: true,
  template: () => html`
    <h1>Not found component!</h1>
    <p>Please check your URL.</p>
  `
})
export class NotFoundComponent extends HTMLElement {}

Components.ts

List of all components inside the platform.

function strEnum<T extends string>(o: Array<T>): {[K in T]: K} {
    return o.reduce((res, key) => {
        res[key] = key;
        return res;
    }, Object.create(null));
}
export const Components = strEnum([
    'app-component',
    'not-found-component',
    'navbar-component',
    'home-component',
    'about-component'
]);
export type Components = keyof typeof Components;

Unit Testing

import 'jest';
import { Container, createTestBed } from '@rxdi/core';
import { State } from './app.state';

describe('State Injectable', () => {
  beforeAll(async () => {
    await createTestBed({
      imports: [],
      providers: [State]
    }).toPromise();
  });

  it('should be defined', done => {
    expect(Container.has(State)).toBeTruthy();
    done();
  });
});

Component testing

import { Container, createTestBed } from '@rxdi/core';
import { HomeComponent } from './home.component';

describe('State Injectable', () => {
  beforeAll(async () => {
    await createTestBed({
      imports: [],
      components: [HomeComponent]
    }).toPromise();
  });

  afterEach(() => {
    // The jsdom instance is shared across test cases in a single file so reset the DOM
    while (document.body.firstChild) {
      document.body.removeChild(document.body.firstChild);
    }
  });

  it('should be defined', done => {
    expect(Container.has(HomeComponent)).toBeTruthy();
    done();
  });

  it('displays greeting', () => {
    const element = Container.get(HomeComponent);
    element['render']();
    document.body.appendChild(element);
    const div = document.querySelector('home-component');
    expect(div.textContent).toBe('');
  });
});

Debug testing with VSCODE

Go to Debug tab and hit Jest Test

Firebase deploy

Install firebase-tools

npm install -g firebase-tools

Execute firebase init command and follow the steps

firebase init

Note dist is the output folder of command npm run build aka parcel build when choosing your deploy folder you should consider put dist

This example is configurated to deploy with firebase so you need just to assign your projectId:

firebase use --add

firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

.firebaserc

{
  "projects": {
    "staging": "rxdi-pwa"
  }
}

Good practices

Keep templates really simple and use renderer to show them instead of writing logic inside

Wrong

import { async } from '@rxdi/lit-html';
import { map } from 'rxjs/operators';
import { of } from 'rxjs';

const getCollection = async () => ({ collection: { name: '@rxdi/core' } });

html`
  <div>
  ${async(of(getCollection('@rxdi/core')).pipe(map(o => o.collection), map(c => c.name)))}
  </div>
`

In this example the logic is testable

Correct

import { async } from '@rxdi/lit-html';
import { map } from 'rxjs/operators';
import { of } from 'rxjs';

const getCollection = async () => ({ collection: { name: '@rxdi/core' } });
const something = () => of(getCollection()).pipe(map(o => o.collection), map(c => c.name));

html`
  <div>
  ${async(something)}
  </div>
`

Wiring up multiple Injectables with single InjectionToken

import { Injectable, InjectionToken, Container } from '@rxdi/core';

export interface FactoryToken {
  dispatch(action: Actions): void;
}

export type Actions = 'view-initialized' | 'user-logged-in';

export const FactoryToken = new InjectionToken<FactoryToken>('factories');

@Injectable({
    id: FactoryToken,
    init: true,
    multiple: true
})
export class State implements FactoryToken {
    dispatch(action: Actions) {}
}

@Injectable({
    id: FactoryToken,
    init: true,
    multiple: true
})
export class State2 implements FactoryToken {
    dispatch(action: Actions) {}
}

@Injectable({
    id: FactoryToken,
    init: true,
    multiple: true
})
export class State3 implements FactoryToken {
  dispatch(action: Actions) {}
}


const factories = Container.getMany(FactoryToken); // factories is Factory[]
factories.forEach(factory => factory.dispatch('user-logged-in'));

Injecting multiproviders inside Components

import { InjectMany, Component } from '@rxdi/core';
import { html, render, Component } from '@rxdi/lit-html';
import { FactoryToken } from './app.state';

/**
 * @customElement my-web-component
 */
@Component({
  selector: 'my-web-component'
})
export class MyWebComponent extends LitElement {

  @InjectMany(FactoryToken) private states: FactoryToken

  OnInit() {
    this.state.dispatch('user-logged-in');
  }
}

Code splitting

Lets create our lazy loaded module with routes

import { Module } from '@rxdi/core';
import { AboutComponent } from './about.component';
import { RouterModule } from '@rxdi/router';

@Module({
  imports: [
    RouterModule.forChild([
      {
        path: '/',
        component: 'x-user-home'
      },
      {
        path: '/:user',
        component: 'x-user-profile'
      }
    ])
  ],
  bootstrap: [AboutComponent]
})
export class AboutModule {}

Importing module

Lets import this module inside AppModule

RouterModule.forRoot<Components>([
  {
    path: '/',
    component: 'home-component'
  },
  {
    path: '/about',
    component: 'about-component',
    children: () => import('./about/about.module'),
  },
])

Part with children: is really important since this will lazy load our module and load routes.

From where this about-component come from ? and how we actually load it ? Here is the magic

Every @rxdi/core module has property bootstrap(check above AboutModule), putting Component inside, will add him automatically to Dependency injection and thus it will be registered inside customComponents collection from where Router will load it and redirect to.

If you don't define component property the rendered view will be empty and then you can control the view from the child module config by defining empty slash path /

RouterModule.forChild([
  {
    path: '/',
    component: 'x-user-home'
  }
])

If you define component property and the element present this will be the main element wrapper for all other views so it will present inside every child view.

You can define also components directly passing class instance since automaticaly decorator is creating static method is() returning tag name

RouterModule.forChild([
  {
    path: '/',
    component: XUserHomeComponent
  }
])

Router Guards

Defining Guard

import { Injectable, OnInit } from '@rxdi/core';
import { Observable } from 'rxjs';
import {
 CanActivateContext,
 CanActivateCommands,
 CanActivateResolver,
 CanActivateRedirectResult
} from '@rxdi/router';

@Injectable()
export class LoggedInGuard implements CanActivateResolver, OnInit {

 OnInit() {}

 canActivate(
   context: CanActivateContext,
   commands: CanActivateCommands
 ): CanActivateRedirectResult | boolean | Promise<boolean> | Observable<boolean> | void {
   // return commands.redirect('/')
   // return false | true;
   // return new Promise((r) => r(true | false));
   // return new Observable((o) => {
   //     o.next(false | true);
   //     o.complete();
   // });
   // throw new Error('error');
   // If everything is cool we can leave VOID

   
 }
}

Using guard

Guards can be defined inside RouterModule When particular route resolver is triggered you will stop in this Guard before component is resolved

RouterModule.forRoot<Components>([
  {
    path: '/',
    component: 'home-component'
  },
  {
    path: '/about',
    component: 'about-component',
    children: () => import('./about/about.module'),
    canActivate: LoggedInGuard
  },
])

Njoy!