How to use the handlebars/dist/handlebars.min.js.compile function in handlebars

// import JSONFormatter from 'json-formatter-js'
import handlebars from 'handlebars/dist/handlebars.min.js'
// import { utils } from '@iceteachain/web3'
import tweb3 from './tweb3'
import $ from 'jquery'
import { fmtHex } from './helper'
import { toTEA } from './common'

const candidateTemplate = handlebars.compile(document.getElementById('candidateTemplate').innerHTML)

const microTEAtoTEA = (microTEA) => {
  return toTEA(microTEA).toLocaleString() + ' TEA'
}

const formatCandidates = (candidates) => {
  /**
     * `TODO`: `handle the case when candidate's NAME is way too long` by `click hover`
     */

  candidates.forEach(candidate => {
    candidate.pubkeyText = fmtHex(candidate.pubKey.data, 4)
    candidate.capacityText = microTEAtoTEA(candidate.capacity)
    candidate.operatorText = fmtHex(candidate.operator, 4)
  })
  return candidates

import tweb3 from './tweb3'
import handlebars from 'handlebars/dist/handlebars.min.js'
import $ from 'jquery'
window.$ = $

const storeTemplate = handlebars.compile(document.getElementById('storeTemplate').innerHTML)

const initWeb3 = async (showAlert = true) => {
  try {
    var resp = await tweb3.wallet.loadFromStorage('123', undefined, tweb3.wallet.defaultAccount)
    if (resp === 0) {
      window.alert('Wallet empty! Please go to Wallet tab to create account.')
      return
    }
    return true
  } catch (error) {
    console.error(error)
    const err = 'Please go to Wallet tab to create or import one first.'
    showAlert && window.alert(err)
    return false
  }
}

async function fillAddressInfo () {
  try {
    var contract = document.getElementById('signers').value
    if (!contract) return
    const info = await tweb3.getAccountInfo(contract)
    info.address = contract
    info.balanceLocale = toTEA(info.balance).toLocaleString()
    const source = document.getElementById('infoTemplate').innerHTML
    const template = handlebars.compile(source)
    var html = template(info)
    document.getElementById('addressInfo').innerHTML = html
  } catch (error) {
    console.log(error)
    window.alert(String(error))
  }
}

import JSONFormatter from 'json-formatter-js'
import handlebars from 'handlebars/dist/handlebars.min.js'
import { utils } from '@iceteachain/web3'
import tweb3 from './tweb3'
import { fmtHex, fmtTime } from './helper'
import { toTEA } from './common'

const blockTemplate = handlebars.compile(document.getElementById('blockTemplate').innerHTML)
const txTemplate = handlebars.compile(document.getElementById('txTemplate').innerHTML)

function fmtBlocks (blocks) {
  return blocks.map(b => ({
    height: b.header.height,
    shash: fmtHex(b.block_id.hash, 10),
    timestamp: fmtTime(b.header.time),
    txCount: b.header.num_txs
  }))
}

function fmtTxs (txs) {
  txs = txs.map(utils.decodeTxResult)
  txs.forEach(t => {
    const data = t.tx
    t.shash = fmtHex(t.hash)

htmlContentPromise.then(htmlTemplate => {
            if (htmlTemplate) {
                let compiledTemplate = Handlebars.compile(htmlTemplate);
                let config = this.configuration.config || {};
                let rawHtml = compiledTemplate(config);
                this.fragment = document.createRange().createContextualFragment(rawHtml);
                this.isLoaded = true;
                this.onLoaded.notifyObservers(this);
            }
        });
    }

parseDirections () {
    const { security, device, action: { status, directions } } = this.props
    const html = converter.makeHtml(directions)
    const passing = status === 'PASS'
    const template = Handlebars.compile(html)
    const platformOverrides = this.getPlatformAndVersionSpecificFlags(device)
    return template({ ...security, ...device, ...platformOverrides, passing })
  }

parseTitle () {
    const { action: { status, title } } = this.props
    const template = Handlebars.compile(title)
    const passing = status === 'PASS'
    return template({ passing })
  }

(async () => {
  const hash = new URLSearchParams(window.location.search).get('hash')
  if (hash) {
    const source = document.getElementById('tableTemplate').innerHTML
    const template = handlebars.compile(source)

    if (!(await fetchTxDetails(template, hash))) {
      var interval = setInterval(async () => {
        if (await fetchTxDetails(template, hash)) clearInterval(interval)
      }, 1000)
    }
  }
})()

const template = require('./templates/template').template;
const sinceTemplate = require('./templates/api-component-since').template;
const propertiesTemplate = require('./templates/api-properties-section').template;
const slotsTemplate = require('./templates/api-slots-section').template;
const eventsTemplate = require('./templates/api-events-section').template;
const methodsTemplate = require('./templates/api-methods-section').template;
const cssVariablesTemplate = require('./templates/api-css-variables-section').template;
const Handlebars = require('handlebars/dist/handlebars.min.js');
const fs = require('fs');
const path = require('path');
const mkdirp = require('mkdirp');

const api = JSON.parse(fs.readFileSync(path.normalize(process.argv[2])));

const entries = api['symbols'];
const compiledHandlebars = Handlebars.compile(template);
const compiledSinceTemplate = Handlebars.compile(sinceTemplate);
const linkMatcher = /{@link(\s)(\w+)\s*}/gi;
const sinceMarker = "";

const getComponentByName = name => {
	return entries.find(element => {
		return element.basename === name;
	})
};

const getCSSVarsByName = name => {
	return cssVariables[name] || [];
};

const capitalize = str => {
	return str.replace(/^./, str => str.toUpperCase());

minHeight: height,
    maxHeight: height
  })

  const lastHeight = info.last_height
  const block = info.block_metas[0]

  const data = block.header
  data.lastHeight = lastHeight
  data.hash = block.block_id.hash
  data.prevHash = data.last_block_id.hash
  data.prevHeight = (data.height - 1) || 1
  data.time = fmtTime(data.time)

  const source = document.getElementById('tableTemplate').innerHTML
  const template = handlebars.compile(source)
  const html = template(data)
  document.getElementById('tableContent').innerHTML = html

  return data.num_txs
}