How to use the htm.bind function in htm

To help you get started, we’ve selected a few htm examples, based on popular ways it is used in public projects.

github spectjs / spect / src / html-preact.js View on Github external
// 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) {
github preactjs / preact / demo / stateOrderBug.js View on Github external
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
			type="checkbox"
			checked=${childFirst}
			onchange=${evt => {
				childFirst = evt.target.checked;
			}}
		/>
		Set child state before parent state.
	</label>
`;
github Tencent / omi / packages / omi / src / omi.js View on Github external
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,
github custom-cards / spotify-card / src / spotify-card.js View on Github external
* 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};
github atomicojs / atomico / src / html.js View on Github external
import htm from "htm";
import { h } from "./core/core";
const html = htm.bind(h);
export default html;
github timarney / htm-ssr-demo / pages / index.js View on Github external
import htm from "htm";
import { h } from "preact";
import { css } from "emotion";
import { Header, Footer, Features, TwitterLinks } from "../components/";

const html = htm.bind(h);

const pink = css`
  color: #ff1493;
`;

const items = ["@rauchg", "@timarney", "@TejasKumar_", "@aaronshaf"];

export const IndexPage = () => {
  return html`
    <div>
      <${Header} />
      <p>
        <a href="https://twitter.com/_developit/status/1075860623119081472">HTM 2 is here! 🎉</a>
      </p>
      <h1 class="${pink}">People who have been waiting for HTM 2 !</h1>
      <${TwitterLinks} items="${items}" /> 
github timarney / htm-ssr-demo / components / Header.js View on Github external
import htm from "htm";
import { h } from "preact";
const html = htm.bind(h);
export const Header = () => {
  return html`
    <div>
      <a alt="home" href="/"> Home </a> <a alt="about" href="/about"> About </a>
    </div>
  `;
};
github speee / jsx-slack / src / tag.ts View on Github external
}

const stringSubsitutionSymbol = Symbol('jsxslackStringSubsitution')

const isString = (value: any): value is string =>
  Object.prototype.toString.call(value) === '[object String]'

const normalize = (value: any, isAttributeValue = false) => {
  if (isString(value)) {
    if (value[stringSubsitutionSymbol]) return value.toString()
    return he.decode(value, { isAttributeValue })
  }
  return value
}

const firstPass: JSXSlackTemplate<VirtualNode | VirtualNode[]> = htm.bind(
  (type, props, ...children): VirtualNode => ({
    type: normalize(type),
    props: props
      ? Object.keys(props).reduce(
          (prps, key) => ({ ...prps, [key]: normalize(props[key], true) }),
          {}
        )
      : props,
    children: flattenDeep(children.map(c => normalize(c))),
  })
)

const render = (parsed: unknown) => {
  if (typeof parsed === 'object' && parsed) {
    const node = parsed as VirtualNode
    let { type } = node
github Tencent / omi / packages / omire / src / omi.js View on Github external
import options from './options'
import WeElement from './we-element'
import { render } from './render'
import { define } from './define'
import { tag } from './tag'
import { observe } from './observe'
import { getHost } from './get-host'
import { rpx } from './rpx'
import { tick, nextTick } from './tick'
import ModelView from './model-view'
import { classNames, extractClass } from './class'
import htm from 'htm'
import React from 'react'

const html = htm.bind(h)
const h = React.createElement
const createElement = React.createElement
const cloneElement = React.cloneElement

function createRef() {
  return {}
}

const Component = WeElement
const defineElement = define

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

htm

The Tagged Template syntax for Virtual DOM. Only browser-compatible syntax.

Apache-2.0
Latest version published 5 months ago

Package Health Score

89 / 100
Full package analysis

Popular htm functions

Similar packages