How to use the cyclejs.h function in cyclejs
To help you get started, we’ve selected a few cyclejs examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
erykpiast / cyclejs-mock / test / inject-testing-utils.spec.js View on Github 
injectTestingUtils((render) => {
let vdom = h('div', {
className: 'xxx',
id: 'xyz'
}, [
'just text',
h('span', 'span 1'),
h('ul', [
h('li', { key: 0 }, 'li 1'),
h('li', { key: 1 }, 'li 2'),
h('li', { key: 2 }, 'li 3'),
])
]);
let rendered = render(vdom);
assert.equal(rendered.tagName, 'DIV');
assert.equal(rendered.className, 'xxx');
assert.equal(rendered.id, 'xyz');
assert.equal(rendered.childNodes.length, 3);
assert.equal(rendered.childNodes[0].data, 'just text');
assert.equal(rendered.childNodes[1].tagName, 'SPAN');injectTestingUtils((render) => {
let vdom = h('div', {
className: 'xxx',
id: 'xyz'
}, [
'just text',
h('span', 'span 1'),
h('ul', [
h('li', { key: 0 }, 'li 1'),
h('li', { key: 1 }, 'li 2'),
h('li', { key: 2 }, 'li 3'),
])
]);
let rendered = render(vdom);
assert.equal(rendered.tagName, 'DIV');
assert.equal(rendered.className, 'xxx');
assert.equal(rendered.id, 'xyz');
assert.equal(rendered.childNodes.length, 3);
assert.equal(rendered.childNodes[0].data, 'just text');
assert.equal(rendered.childNodes[1].tagName, 'SPAN');
assert.equal(rendered.childNodes[1].childNodes.length, 1);injectTestingUtils((render) => {
let vdom = h('div', {
className: 'xxx',
id: 'xyz'
}, [
'just text',
h('span', 'span 1'),
h('ul', [
h('li', { key: 0 }, 'li 1'),
h('li', { key: 1 }, 'li 2'),
h('li', { key: 2 }, 'li 3'),
])
]);
let rendered = render(vdom);
assert.equal(rendered.tagName, 'DIV');
assert.equal(rendered.className, 'xxx');
assert.equal(rendered.id, 'xyz');
assert.equal(rendered.childNodes.length, 3);
assert.equal(rendered.childNodes[0].data, 'just text');
assert.equal(rendered.childNodes[1].tagName, 'SPAN');
assert.equal(rendered.childNodes[1].childNodes.length, 1);
assert.equal(rendered.childNodes[1].childNodes[0].data, 'span 1');injectTestingUtils((render) => {
let vdom = h('div', {
className: 'xxx',
id: 'xyz'
}, [
'just text',
h('span', 'span 1'),
h('ul', [
h('li', { key: 0 }, 'li 1'),
h('li', { key: 1 }, 'li 2'),
h('li', { key: 2 }, 'li 3'),
])
]);
let rendered = render(vdom);
assert.equal(rendered.tagName, 'DIV');
assert.equal(rendered.className, 'xxx');
assert.equal(rendered.id, 'xyz');
assert.equal(rendered.childNodes.length, 3);
assert.equal(rendered.childNodes[0].data, 'just text');
assert.equal(rendered.childNodes[1].tagName, 'SPAN');
assert.equal(rendered.childNodes[1].childNodes.length, 1);
assert.equal(rendered.childNodes[1].childNodes[0].data, 'span 1');injectTestingUtils((render) => {
let vdom = h('div', {
className: 'xxx',
id: 'xyz'
}, [
'just text',
h('span', 'span 1'),
h('ul', [
h('li', { key: 0 }, 'li 1'),
h('li', { key: 1 }, 'li 2'),
h('li', { key: 2 }, 'li 3'),
])
]);
let rendered = render(vdom);
assert.equal(rendered.tagName, 'DIV');
assert.equal(rendered.className, 'xxx');(textFieldValue, autocompletions, areAutocompletionsVisible, highlightedAutocompletionIndex, isValueInvalid) =>
h('div', [
h('style', stylesheet),
h('input#field', {
type: 'text',
value: textFieldValue,
className: isValueInvalid ? 'is-invalid' : ''
}),
h('ul', {
scrollTop: vdomPropHook((element, property) => {
var singleOptionHeight = element.children[0] ? element.children[0].offsetHeight : 18;
var selectedAutocompletionTop = highlightedAutocompletionIndex * singleOptionHeight;
var selectedAutocompletionBottom = (highlightedAutocompletionIndex + 1) * singleOptionHeight;
var visibleViewport = {
top: element[property],
bottom: element[property] + element.offsetHeight
};(textFieldValue, autocompletions, areAutocompletionsVisible, highlightedAutocompletionIndex, isValueInvalid) =>
h('div', [
h('style', stylesheet),
h('input#field', {
type: 'text',
value: textFieldValue,
className: isValueInvalid ? 'is-invalid' : ''
}),
h('ul', {
scrollTop: vdomPropHook((element, property) => {
var singleOptionHeight = element.children[0] ? element.children[0].offsetHeight : 18;
var selectedAutocompletionTop = highlightedAutocompletionIndex * singleOptionHeight;
var selectedAutocompletionBottom = (highlightedAutocompletionIndex + 1) * singleOptionHeight;
var visibleViewport = {
top: element[property],
bottom: element[property] + element.offsetHeight
};
if(selectedAutocompletionTop < visibleViewport.top) {
element[property] = selectedAutocompletionTop;
} else if(selectedAutocompletionBottom > visibleViewport.bottom) {
element[property] = selectedAutocompletionTop + singleOptionHeight - element.offsetHeight;
}
}),(textFieldValue, autocompletions, areAutocompletionsVisible, highlightedAutocompletionIndex, isValueInvalid) =>
h('div', [
h('style', stylesheet),
h('input#field', {
type: 'text',
value: textFieldValue,
className: isValueInvalid ? 'is-invalid' : ''
}),
h('ul', {
scrollTop: vdomPropHook((element, property) => {
var singleOptionHeight = element.children[0] ? element.children[0].offsetHeight : 18;
var selectedAutocompletionTop = highlightedAutocompletionIndex * singleOptionHeight;
var selectedAutocompletionBottom = (highlightedAutocompletionIndex + 1) * singleOptionHeight;
var visibleViewport = {
top: element[property],
bottom: element[property] + element.offsetHeight
};(textFieldValue, autocompletions, areAutocompletionsVisible, highlightedAutocompletionIndex, isValueInvalid) =>
h('div', [
h('style', stylesheet),
h('input#field', {
type: 'text',
value: textFieldValue,
className: isValueInvalid ? 'is-invalid' : ''
}),
h('ul', {
scrollTop: vdomPropHook((element, property) => {
var singleOptionHeight = element.children[0] ? element.children[0].offsetHeight : 18;
var selectedAutocompletionTop = highlightedAutocompletionIndex * singleOptionHeight;
var selectedAutocompletionBottom = (highlightedAutocompletionIndex + 1) * singleOptionHeight;
var visibleViewport = {
top: element[property],
bottom: element[property] + element.offsetHeight
};
if(selectedAutocompletionTop < visibleViewport.top) { }, autocompletions.map((keyword, index) => h('li.autocompletion', {
key: index,
index: index,
className: highlightedAutocompletionIndex === index ? 'is-selected' : ''
}, keyword)))
])cyclejs
A fully reactive JavaScript framework for Human-Computer Interaction
Package Health Score
59 / 100Popular cyclejs functions
- cyclejs.applyToDOM
- cyclejs.createDOMUser
- cyclejs.createIntent
- cyclejs.createModel
- cyclejs.createStream
- cyclejs.createView
- cyclejs.h
- cyclejs.latest
- cyclejs.registerCustomElement
- cyclejs.render
- cyclejs.Rx
- cyclejs.Rx.AnonymousObservable
- cyclejs.Rx.BehaviorSubject
- cyclejs.Rx.internals
- cyclejs.Rx.Observable
- cyclejs.Rx.ReactiveTest
- cyclejs.Rx.TestScheduler
- cyclejs.Rx.VirtualTimeScheduler
- cyclejs.vdomPropHook