Test

April, 2019

...

Photo by Ir Solyanaya

Introduction

And here is how all begins.

export default class extends HTMLElement {
  static get observedAttributes() {
    return ['record', 'context-data'];
  }

  constructor() {
    super();
  }

  connectedCallback() {
    this.update();
  }

  disconnectedCallback() {
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    this.update();
  }

  get record() {
    return JSON.parse(this.getAttribute('record'));
  }

  set record(value) {
    this.setAttribute('record', JSON.stringify(value));
  }

  get contextData() {
    return JSON.parse(this.getAttribute('context-data'));
  }

  update() {
    let template = '';

    if (this.record) {
      template = `
        <h3>Record Values</h3>
        <pre>${JSON.stringify(this.record, undefined, 2)}</pre>
      `;
    }

    this.innerHTML = template;
  }
}
export default class extends HTMLElement {
  static get observedAttributes() {
    return ['record', 'context-data'];
  }

  constructor() {
    super();
  }

  connectedCallback() {
    this.update();
  }

  disconnectedCallback() {
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    this.update();
  }

  get record() {
    return JSON.parse(this.getAttribute('record'));
  }

  set record(value) {
    this.setAttribute('record', JSON.stringify(value));
  }

  get contextData() {
    return JSON.parse(this.getAttribute('context-data'));
  }

  update() {
    let template = '';

    if (this.record) {
      template = `
        <h3>Record Values</h3>
        <pre>${JSON.stringify(this.record, undefined, 2)}</pre>
      `;
    }

    this.innerHTML = template;
  }
}
Copy

Move out common elements

import { SwimlaneElement } from '@swimlane/element@1'

export default class extends SwimlaneElement {
  update() {
    let template = '';

    if (this.record) {
      template = `
        <h3>Record Values</h3>
        <pre>${JSON.stringify(this.record, undefined, 2)}</pre>
      `;
    }

    this.innerHTML = template;
  }
}
import { SwimlaneElement } from '@swimlane/element@1'

export default class extends SwimlaneElement {
  update() {
    let template = '';

    if (this.record) {
      template = `
        <h3>Record Values</h3>
        <pre>${JSON.stringify(this.record, undefined, 2)}</pre>
      `;
    }

    this.innerHTML = template;
  }
}
Copy

Import and extend the swimlane element

Returning just a render method

import { SwimlaneElement, html } from '@swimlane/element@1';

export default class extends SwimlaneElement {
  render() {
   	html`
      <h3>Record Values</h3>
      <pre>${JSON.stringify(this.record, undefined, 2)}</pre>`;
  }
}
import { SwimlaneElement, html } from '@swimlane/element@1';

export default class extends SwimlaneElement {
  render() {
   	html`
      <h3>Record Values</h3>
      <pre>${JSON.stringify(this.record, undefined, 2)}</pre>`;
  }
}
Copy

Import lit-html and define only the render method.

“Talk is cheap. Show me the code.”

Full screen

More by
the same passionate developer