mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
83 lines
2.0 KiB
TypeScript
83 lines
2.0 KiB
TypeScript
|
|
import * as h from 'hyperscript'
|
|
|
|
// Test/example code adapted from https://github.com/dominictarr/hyperscript/blob/master/README.md
|
|
|
|
// example
|
|
h('div#page',
|
|
h('div#header',
|
|
h('h1.classy', 'h', { style: {'background-color': '#22f'} })),
|
|
h('div#menu', { style: {'background-color': '#2f2'} },
|
|
h('ul',
|
|
h('li', 'one'),
|
|
h('li', 'two'),
|
|
h('li', 'three'))),
|
|
h('h2', 'content title', { style: {'background-color': '#f22'} }),
|
|
h('p',
|
|
"so it's just like a templating engine,\n",
|
|
"but easy to use inline with javascript\n"),
|
|
h('p',
|
|
"the intension is for this to be used to create\n",
|
|
"reusable, interactive html widgets. "))
|
|
|
|
// event
|
|
h('a', {href: '#',
|
|
onclick: function (e: Event) {
|
|
alert('you are 1,000,000th visitor!')
|
|
e.preventDefault()
|
|
}
|
|
}, 'click here to win a prize')
|
|
|
|
// array of children
|
|
const obj: {[id: string]: string} = {
|
|
a: 'Apple',
|
|
b: 'Banana',
|
|
c: 'Cherry',
|
|
d: 'Durian',
|
|
e: 'Elder Berry'
|
|
}
|
|
h('table',
|
|
h('tr', h('th', 'letter'), h('th', 'fruit')),
|
|
Object.keys(obj).map(function (k) {
|
|
return h('tr',
|
|
h('th', k),
|
|
h('td', obj[k])
|
|
)
|
|
})
|
|
)
|
|
|
|
// new context
|
|
const h2 = h.context()
|
|
h2('a', {href: '#',
|
|
onclick: function (e: Event) {
|
|
alert('you are 1,000,000th visitor!')
|
|
e.preventDefault()
|
|
}
|
|
}, "Click this")
|
|
|
|
h2.cleanup()
|
|
|
|
/* Polymorphic type tests */
|
|
|
|
// fall back to Element when in doubt
|
|
let fallbackTest = h('canvas#test3');
|
|
|
|
// determine proper Element type from tagName
|
|
let htmlTest1: HTMLCanvasElement = h('canvas');
|
|
|
|
// allow coercion of decorated tagName to proper type
|
|
let htmlTest2: HTMLCanvasElement = h<HTMLCanvasElement>('canvas#test2');
|
|
|
|
// if you need it to be an HTMLElement, you must coerce
|
|
let htmlTest3 = h<HTMLElement>('canvas#test3');
|
|
|
|
// support SVG elements
|
|
let svgTest1 = h('svg');
|
|
|
|
// allow coercions on SVG elements
|
|
let svgTest2 = h<SVGSVGElement>('svg#test5');
|
|
|
|
// inline coercion if you were feeling pedantic
|
|
h<HTMLDivElement>('div#page',
|
|
h<HTMLDivElement>('div#header',
|
|
h<HTMLHeadingElement>('h1.classy', 'h', { style: {'background-color': '#22f'} }))); |