How to use htm - 10 common examples

// preact-based html implementation
// portals have discrepancy with

import { createElement, render as preactRender, Fragment, hydrate } from 'preact'
import htm from 'htm'
import { isElement, SPECT_CLASS } from './util'
import { publish } from './core'
import tuple from 'immutable-tuple'
import morph from 'nanomorph'


// render vdom into element
export default htm.bind(h)

const _vdom = Symbol('vdom')

const testCache = new Map


// TODO
// turn vdom into real dom
// since preact is isolated structure, it can't hydrate existing nodes
// unless they 1:1 match rendered result
// therefore we render preact into tmp DOM
// and then morph that tmp DOM into real DOM
const elCache = new WeakSet
export function render (vdom, el) {
  // html`<${el}.a.b.c />`
  for (let name in props) {

import htm from 'htm';
import { h } from 'preact';
import { useState, useCallback } from 'preact/hooks';

const html = htm.bind(h);

// configuration used to show behavior vs. workaround
let childFirst = true;
const Config = () => html`
	<label>
		<input checked="${childFirst}" type="checkbox"> {
				childFirst = evt.target.checked;
			}}
		/&gt;
		Set child state before parent state.
	</label>
`;

export default function html(...args) {
  let prevUseCache = plannedComponentInit
  plannedComponentInit = new Set()

  // render DOM
  let result = htm.call(h, ...args) || document.createTextNode('')

  // non-DOM htm result to DOM
  if (isPrimitive(result)) result = document.createTextNode(result)
  else if (Array.isArray(result)) {
    // let frag = document.createDocumentFragment()
    // frag.append(...result)
    // result = frag
    result = html`<>${result}`
  }

  // seal result
  result[_morph] = false

  return result
}

export default function html (...args) {
  let prevUseCache = currentUseCache
  currentUseCache = new Set()

  // render DOM
  let result = htm.call(h, ...args)

  // non-DOM htm result to DOM
  if (typeof result === 'string') result = document.createTextNode(result)
  else if (Array.isArray(result)) {
    result = result.map(el => used(el))
    let frag = document.createDocumentFragment()
    frag.append(...result)
    result = frag
  }
  else result = used(result)

  // run `use`, `is` in children
  for (let el of currentUseCache) {
    used(el)
  }
  currentUseCache = prevUseCache

export default function html(el, ...args) {
  let content
  // html`<...>`
  // html(...)
  if (!args.length || (Array.isArray(el) && el.raw)) {
    content = htm.call(h, el, ...args)
    el = document.createDocumentFragment()
  }
  // html(el, ...)`
  else {
    content = args[0]
    // html('.selector', ...)
    if (typeof el === 'string') el = document.querySelectorAll(el)

  }

  if (isElement(el)) {
    // html(el, htmlContent)
    if (isElement(content) || isIterable(content)) {
      if (isElement(content)) content = [content]
      domdiff(el, [...el.childNodes], content)
    }

export default function html(...args) {
  let el = this[_target] || this

  // tpl string: html`<a>`
  let vdom
  if (args[0].raw) {
    vdom = htm.call(h, ...args)
  }

  // html('</a><a>')
  else if (typeof args[0] === 'string') vdom = htm.call(h, args)

  // fn: html(children =&gt; [...children])
  else if (typeof args[0] === 'function') {
    let output = args[0](el)
    if (output &amp;&amp; output !== el) {
      // substitute previous node with the new one in both DOM/spect collection

      // TODO: wrapping part is not ready
      // wrapping
      if (output[0].contains(el)) {
        throw Error('TODO: organize wrapping')
      }

      // new node
      else {
        el.replaceWith(...output)</a>

export default function html(...args) {
  let el = this[_target] || this

  // tpl string: html`<a>`
  let vdom
  if (args[0].raw) {
    vdom = htm.call(h, ...args)
  }

  // html('</a><a>')
  else if (typeof args[0] === 'string') vdom = htm.call(h, args)

  // fn: html(children =&gt; [...children])
  else if (typeof args[0] === 'function') {
    let output = args[0](el)
    if (output &amp;&amp; output !== el) {
      // substitute previous node with the new one in both DOM/spect collection

      // TODO: wrapping part is not ready
      // wrapping
      if (output[0].contains(el)) {
        throw Error('TODO: organize wrapping')
      }</a>

mousetrap.bind('command+u', () => dispatch({ type: 'publishBlog' }));
mousetrap.bind('command+,', () => dispatch({ type: 'openSettings' }));
if (isDev) {
  mousetrap.bind('command+alt+e', () => global.electronStore.clear());
}

// Fire actions from main process.
ipcRenderer.on('action', (_, action) => {
  dispatch(action);
});

// Run side effects.
effects.run(appRoot);

// Render the app.
render(
  html`
    <${App} />
  `,
  appRoot
);

import { render } from './render'
import { define } from './define'
import { tag } from './tag'
import { cloneElement } from './clone-element'
import { getHost } from './get-host'
import { rpx } from './rpx'
import { classNames, extractClass } from './class'
import { o } from './o'
import htm from 'htm'
import { extend, get, set, bind, unbind } from './extend'
import JSONProxy from './proxy'
import { Fragment } from './util'

h.f = Fragment

const html = htm.bind(h)

function createRef() {
  return {}
}

const $ = {}
const Component = WeElement
const defineElement = define
const elements = options.mapping

const omi = {
  tag,
  WeElement,
  Component,
  render,
  h,

* Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import 'core-js/stable';
import { h, Component, render } from 'preact';
import htm from 'htm';
const html = htm.bind(h);
import SpotifyCard from './SpotifyCard';

const styleElement = document.createElement('style');
const styles = {
  green: 'rgb(30, 215, 96)',
  lightBlack: 'rgb(40, 40, 40)',
  black: 'rgb(24, 24, 24)',
  grey: 'rgb(170, 170, 170)',
  sand: 'rgb(200, 200, 200)',
  white: 'rgb(255, 255, 255)',
  blue: '#4688d7',
};

styleElement.textContent = `
    .spotify_container {
      background-color: ${styles.lightBlack};