GraphQL in HTML with Apollo Elements

export class ClockController {
  value = new Date();

  timeFormat = new Intl.DateTimeFormat('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
  });

  constructor(host, timeout = 1000) {
    (this.host = host).addController(this);
    this.timeout = timeout;
  }
  /* playground-fold */

  hostConnected() {
    // Start a timer when the host is connected
    this._timerID = setInterval(() => {
      this.value = new Date();
      // Update the host with new value
      this.host.requestUpdate();
    }, this.timeout);
  }
  /* playground-fold-end */
  /* playground-fold */

  hostDisconnected() {
    // Clear the timer when the host is disconnected
    clearInterval(this._timerID);
    this._timerID = undefined;
  }
  /* playground-fold-end */

  getFormatted() {
    return this.timeFormat.format(this.value);
  }
}

import { ControllerHostMixin } from '@apollo-elements/mixins/controller-host-mixin';
import { MouseController } from './mouse-controller.js';
const template = document.createElement('template');
      template.innerHTML = `
        %3Clink rel="stylesheet" href="color-picker.css">
        <div id="loupe"><div id="cursor">⊹</div></div>
      `;

class ColorPicker extends ControllerHostMixin(HTMLElement) {
  mouse = new MouseController(this);

  constructor() {
    super();
    this
      .attachShadow({ mode: 'open' })
      .append(template.content.cloneNode(true));
    this.loupe = this.shadowRoot.getElementById('loupe');
    this.cursor = this.shadowRoot.getElementById('cursor');
    this.addEventListener('click', () => {
      this.pick();
      this.cursor.animate({ scale: ['100%', '120%', '100%'], easing: 'ease-in-out' }, 300);
    });
  }

  update() {
    const [x, y] = this.mouse.pos;
    const { clientWidth, clientHeight } = document.documentElement;
    const hue = Math.floor((x / clientWidth) * 360);
    const saturation = 100 - Math.floor((y / clientHeight) * 100);
    this.style.setProperty('--x', `${x}px`);
    this.style.setProperty('--y', `${y}px`);
    this.style.setProperty('--hue', hue);
    this.style.setProperty('--saturation', `${saturation}%`);
    if (this.mouse.down)
      this.pick();
    super.update();
  }

  async pick() {
    await this.updateComplete;
    this.dispatchEvent(new CustomEvent('pick', {
      bubbles: true,
      detail: getComputedStyle(this.loupe).getPropertyValue('background-color')
    }));
  }
};

customElements.define('color-picker', ColorPicker);

import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'
import { ApolloQueryController } from '@apollo-elements/core';
import { gql, TypedDocumentNode } from '@apollo/client/core';

import { client } from './client.js';

interface ProfileQueryData {
  profile: {
    name: string;
  }
}

const UserProfile: TypedDocumentNode<ProfileQueryData> = gql`
  query UserProfile {
    profile {
      name
    }
  }
`;

@customElement('user-profile')
class UserProfileElement extends LitElement {
  static styles = css`.loading { opacity: 0 }`;

  query = new ApolloQueryController(this, UserProfile, { client });

  render() {
    const { data, loading } = this.query;
    return html`
      <h2 class=${classMap({ loading })}>
        Welcome, ${data?.profile?.name}!
      </h2>
    `;
  }
}

import { LitElement, html, css } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'
import { client } from './client.js';

import { ApolloQueryController, ApolloMutationController } from '@apollo-elements/core';

import { UserProfile } from './UserProfile.query.graphql.js';
import { UpdateProfile } from './UpdateProfile.mutation.graphql.js';

@customElement('user-profile')
class UserProfileElement extends LitElement {
  static styles = css`.loading { opacity: 0 }`;

  @query('sl-input') input: HTMLInputElement;

  query = new ApolloQueryController(this, UserProfile, { client });
  muttn = new ApolloMutationController(this, UpdateProfile, {
    client,
    update: (cache, result) => cache.writeQuery({
      query: UserProfile,
      data: { profile: result.data.updateProfile },
    }),
  });

  onClickSave() {
    this.muttn.mutate({ variables: { user: { name: this.input.value } } });
  }

  render() {
    const { data } = this.query;
    const loading = this.query.loading || this.muttn.loading;
    return html`
      <h2 class=${classMap({ loading })}>
        Welcome, ${data?.profile?.name}!
      </h2>

      <sl-input label="Edit Username"
           value=${data?.profile?.name ?? ''}
          .disabled=${loading}></sl-input>

      <sl-button type="primary"
          .disabled=${loading}
          @click=${this.onClickSave}>
        Save
      </sl-button>
    `;
  }
}