How to use the snabbdom.init function in snabbdom

To help you get started, we’ve selected a few snabbdom 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.

github hex13 / enter-ghost / packages / enter-ghost-gui-snabbdom / index.js View on Github external
debugView({
                        data,
                        el
                    });
                });
                //const events = require('../../enter-ghost-debug/gui/events.json').events;

            }
            if (doc.type == 'appTopBar') {

            }
        }
    },
};

const patch = snabbdom.init([
     require('snabbdom/modules/style'),
     require('snabbdom/modules/eventlisteners'),
     polymorphicModule
]);


module.exports = (el) => {
    let last;


    // let items = [{name: 'kotek'}, {name:'piesek'}];
    // setInterval( () => {
    //     const vnodes = items.map((item, i)=> {
    //         return h('div', {
    //             key: item.name,
    //             hook: {
github FractalBlocks / Fractal.js / lib / drivers / view.js View on Github external
const flyd = require('flyd')
const h = require('snabbdom/h')

// Common snabbdom patch function (convention over configuration)
const patch = require('snabbdom').init([
  require('snabbdom/modules/class'),
  require('snabbdom/modules/attributes'),
  require('snabbdom/modules/props'),
  require('snabbdom/modules/eventlisteners'),
  require('snabbdom/modules/style'),
])


export default function view(selector, patchfn = patch) {
  let lastContainer, renderer$

  function wraperPatch(o, n) {
    let newContainer = patchfn(o, n)
    lastContainer = newContainer
    return newContainer
  }
github xwjie / VueStudyNote / Xiao / src / compiler / snabbdom.js View on Github external
import * as snabbdom from 'snabbdom'
import * as snabbdom_class from 'snabbdom/modules/class'
import * as snabbdom_props from 'snabbdom/modules/props'
import * as snabbdom_style from 'snabbdom/modules/style'
import * as snabbdom_directive from './directives/directive'
import * as snabbdom_create_component from './directives/create-component'
import * as snabbdom_eventlisteners from 'snabbdom/modules/eventlisteners'
import * as snabbdom_h from 'snabbdom/h'

const patch = snabbdom.init([ // Init patch function with chosen modules
  snabbdom_class.default, // makes it easy to toggle classes
  snabbdom_props.default, // for setting properties on DOM elements
  snabbdom_style.default, // handles styling on elements with support for animations
  snabbdom_eventlisteners.default, // attaches event listeners
  snabbdom_directive.default, // xiaowenjie add 处理指令
  snabbdom_create_component.default, // xiaowenjie 创建插件
])

const h = snabbdom_h.default // helper function for creating vnodes

export { h, patch }
github cyclejs / cyclejs / dom / src / makeDOMDriver.ts View on Github external
function makeDOMDriver(
  container: string | Element | DocumentFragment,
  options?: DOMDriverOptions
): Driver, MainDOMSource> {
  if (!options) {
    options = {};
  }
  checkValidContainer(container);
  const modules = options.modules || defaultModules;
  makeDOMDriverInputGuard(modules);
  const isolateModule = new IsolateModule();
  const patch = init([isolateModule.createModule()].concat(modules));
  const domReady$ = makeDOMReady$();
  let vnodeWrapper: VNodeWrapper;
  let mutationObserver: MutationObserver;
  const mutationConfirmed$ = xs.create({
    start(listener) {
      mutationObserver = new MutationObserver(() => listener.next(null));
    },
    stop() {
      mutationObserver.disconnect();
    },
  });

  function DOMDriver(vnode$: Stream, name = 'DOM'): MainDOMSource {
    domDriverInputGuard(vnode$);
    const sanitation$ = xs.create();
github prism-rb / prism / dist / prism.js View on Github external
},{}],13:[function(require,module,exports){
var snabbdom = require('snabbdom');
var patch = snabbdom.init([
  require('snabbdom/modules/class').default,
  require('snabbdom/modules/attributes').default,
  require('snabbdom/modules/props').default,
  require('snabbdom/modules/style').default,
  require('snabbdom/modules/eventlisteners').default,
  require('snabbdom/modules/dataset').default
]);
snabbdom_h = require('snabbdom/h').default;

function stringifyEvent(e) {
  const obj = {};
  for (let k in e) {
    obj[k] = e[k];
  }
  return JSON.stringify(obj, (k, v) => {
    if (v instanceof Node) return 'Node';
github TylorS / cycle-snabbdom / src / makeDOMDriver.js View on Github external
export function makeDOMDriver (container, options = {}) {
  const transposition = options.transposition || false
  const modules = options.modules || defaultModules
  const isolateModule = new IsolateModule(new Map([]))
  const patch = init([isolateModule.createModule()].concat(modules))
  const rootElement = getElement(container)
  const vNodeWrapper = new VNodeWrapper(rootElement)
  const delegators = new Map([])
  makeDOMDriverInputGuard(modules)

  return function DOMDriver (vNode$) {
    domDriverInputGuard(vNode$)
    const preprocessedVNode$ = transposition
      ? vNode$.map(transposeVNode).switch()
      : vNode$

    const rootElement$ = preprocessedVNode$
      .map(vNode => vNodeWrapper.call(vNode))
      .scan(patch, rootElement)
      .startWith(rootElement)
      .map(vNode => vNode.elm || vNode)
github ds300 / derivablejs / examples / counter / snabbdom / main.js View on Github external
window.addEventListener('load', () => {
  const patch = snabbdom.init([
    require('snabbdom/modules/eventlisteners'),
  ]);
  $dom.react(wrapPreviousState((newNode, oldNode) => {
    patch(oldNode, newNode);
  }, document.getElementById('main')));
});
github ReactiveX / rxjs / doc / decision-tree-widget / src / main.js View on Github external
const snabbdom = require('snabbdom');
const classModule = require('snabbdom/modules/class');
const propsModule = require('snabbdom/modules/props');
const styleModule = require('snabbdom/modules/style');
const attrsModule = require('snabbdom/modules/attributes');
const h = require('snabbdom/h');
const {div, h4, p, li, ul, a, span} = require('hyperscript-helpers')(h);
const tree = require('./tree.json');
const patch = snabbdom.init([classModule, propsModule, styleModule, attrsModule]);

function intent(containerElem) {
  const click$ = Rx.Observable.fromEvent(containerElem, 'click');

  const chooseOption$ = click$
    .filter(ev => ev.target.className === 'option')
    .map(ev => ({
      type: 'CHOOSE_OPTION',
      payload: parseInt(ev.target.dataset.index)
    }));

  const undo$ = click$
    .filter(ev => ev.target.className === 'undo')
    .map(() => ({
      type: 'UNDO'
    }));