Web Component Libraries: FAST

FAST is a new and innovative web component library and design system from Microsoft. It features statically typed template literals and a flexible reactivity model.

Installation

npm i -S @apollo-elements/fast

yarn add @apollo-elements/fast

pnpm add @apollo-elements/fast

@apollo-elements/fast base classes extend from FASTElement, with all it's ergonomics and reactivity.

import type { Binding, ViewTemplate } from '@microsoft/fast-element'
import { FASTElement, customElement, html, ref, when, repeat } from '@microsoft/fast-element';
import { ApolloQueryBehavior, ApolloMutationBehavior } from '@apollo-elements/fast';
import { ProfileQuery } from './Profile.query.graphql.js';
import { CountriesQuery } from './Countries.query.graphql.js';
import { UpdateProfileMutation } from './UpdateProfile.mutation.graphql.js';
import { client } from './client.js';
import { styles } from './user-profile.css.js';

const name = 'user-profile';
const getCountry: Binding<UserProfile> = x => x.profile.data?.profile?.country.countryCode ?? '';
const getFlag: Binding<UserProfile> = x => x.profile.data?.profile?.country.emoji ?? '';
const getName: Binding<UserProfile> = x => x.profile.data?.profile?.name ?? 'New User';
const hasProfile: Binding<UserProfile> = x => !!x.profile.data?.profile;
const onClickSave: Binding<UserProfile> = x => x.onClickSave();
const getCountries: Binding<UserProfile> = x => Array.from(x.countries.data?.countries ?? []);

const template: ViewTemplate<UserProfile> = html`
  <fast-card>
    <p>Hello, ${getName} ${getFlag}</p>
    <fast-text-field ${ref('nameInput')}
        appearance="filled"
        placeholder="Username">Name</fast-text-field>
    <label for="country">Country</label>
    <fast-combobox autocomplete="both" ${ref('countryInput')}
        id="country"
        value="${getCountry}">${repeat(getCountries, html`
      <fast-option value="${x => x.countryCode}">${x => x.name}
        <span slot="start">${x => x.emoji}</span>
      </fast-option>`)}
    </fast-combobox>
    <fast-button @click="${onClickSave}">Save</fast-button>
  </fast-card>
`;

@customElement({ name, template, styles })
class UserProfile extends FASTElement {
  countryInput: HTMLSelectElement;
  nameInput: HTMLInputElement;

  countries = new ApolloQueryBehavior(this, CountriesQuery, { client });
  profile = new ApolloQueryBehavior(this, ProfileQuery, { client });
  update = new ApolloMutationBehavior(this, UpdateProfileMutation, {
    client,
    update(cache, result) {
      const profile = result.data.updateProfile;
      cache.writeQuery({
        query: ProfileQuery,
        data: { profile },
      });
    }
  });

  onClickSave() {
    this.update.mutate({
      variables: {
        input: {
          name: this.nameInput.value,
          country: this.countryInput.options[this.countryInput.selectedIndex]?.value ?? null,
        },
      },
    });
  }
}