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 { ApolloQuery, customElement, html } from '@apollo-elements/fast';

import { HelloQuery } from './Hello.query.graphql';

const name = 'hello-query';

const template = html<HelloQueryElement>`
  <span id="hello">
    ${x => x.data?.hello?.greeting ?? 'hello'},
    ${x => x.data?.hello?.name ?? 'world'}!
  </span>
`;

@customElement({ name, template })
class HelloQueryElement extends ApolloQuery<typeof HelloQuery> {
  query = HelloQuery;

  variables = {
    name: 'Partner',
    greeting: 'Howdy',
  };
}

Exports

`@apollo-elements/fast`

import {
  ApolloElement,
  ApolloQuery,
  ApolloMutation,
  ApolloSubscription
} from '@apollo-elements/fast';