Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// 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;
}}
/>
Set child state before parent state.
</label>
`;
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};
import htm from "htm";
import { h } from "./core/core";
const html = htm.bind(h);
export default html;
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}" /> </div>
import htm from "htm";
import { h } from "preact";
const html = htm.bind(h);
export const Header = () => {
return html`
<div>
<a href="/" alt="home"> Home </a> <a href="/about" alt="about"> About </a>
</div>
`;
};
}
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 = 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
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,