Native Web components as an alternative solution

[richardeschloss]

Hi 👋 all, I know I've been somewhat missing in action from this project, but over the past few months, I've started going framework-less and more VanillaJS because...I think I end up with an insanely faster dev experience, with code that I have much more control over. Specifically, I've gotten quite deep with native web components and I find that when developing these custom elements on Vite's dev server, I can move faster. Many modern browsers have come a long way in terms of what they can support. The beauty is, these elements are just extended HTMLElements that the browser will understand, just like it understands <div> and <p>, for example. This means that if you already have a Nuxt project or React or whatever framework, these custom elements will work everywhere!

Specifically, here's how I now use highcharts with a simple custom element:

• components/highchart.js:

import Highcharts from 'highcharts'

export default class extends HTMLElement {
  constructor(cfg = { options: {} }) {
    super();
    this.style.display = 'block'
    this.options = JSON.parse(this.getAttribute('options')) || cfg.options 
  }

  // Define the observed attributes (a cool built-in feature with webcomponents)
  static observedAttributes = ["options"];

  /**
   * This is another cool built-in feature with webcomponents. This is like Vue's $watch feature.
   * Whenever any of the "observedAttributes" changes, this function will be called.
   * @param {string} name
   * @param {any} _
   * @param {string} newValue
   */
  attributeChangedCallback(name, _, newValue) {
    if (name === 'options') {
      this.options = JSON.parse(newValue)
      this.updateChart()
    }
  }

  updateChart() {
    Highcharts.chart(this, this.options, (detail) => {
      this.dispatchEvent(new CustomEvent('chartLoaded', { detail }))
    })
  }
}

• register.js:

import MyHighchart from '~/components/Highchart.js'
customElements.define('my-highchart', MyHighchart')

Then it can be used simply like this:

• Example usage:

/** @type {import('highcharts').Options} */
const chartOpts = {
  title: {
    text: 'Some Title!'
  },
  chart: {
    type: 'xy'
  },
  accessibility: {
    enabled: false
  },
  series: [{
    type: 'line',
    name: 'some data',
    data: [[0,1],[2,3]]
  }]
}

export default class extends HTMLElement {
  constructor() {
    super() 
    this.innerHTML = `
      <my-highchart options='${JSON.stringify(chartOpts)}'></my-highchart>
    `
    this.highchart = this.firstElementChild

    setTimeout(() => {
      chartOpts.title.text = 'Changed title!'
      this.highchart.setAttribute('options', JSON.stringify(chartOpts))
    }, 2500)
  }
}

It can also be used in an HTML file <my-highchart></my-highchart> and whenever you set/change the "options" attribute, you'll see the chart updated. This is a simplified example, but the key is you'll have complete control over your custom highchart component.