Running js code after all dom rendered in Cycle.js
<p>I want to use Foundation's reveal plugin to display a nice modal in a Cycle.js app.</p>

<p>After playing with Webpack and it's configuration for hours, I figured how to propertly import foundation's js into my (es6) app.</p>

<p>However, since I'm dealing with virtual dom, the actual html does not exist when foundation's js is initialized.</p>

<p>Here's my component's code:</p>

<pre><code>import Rx from 'rx';
import {div} from '@cycle/dom';

import $ from 'jquery';
import {foundation} from 'foundation-sites/js/foundation.core';
import 'foundation-sites/js/foundation.util.keyboard';
import 'foundation-sites/js/foundation.util.box';
import 'foundation-sites/js/foundation.util.triggers';
import 'foundation-sites/js/foundation.util.mediaQuery';
import 'foundation-sites/js/foundation.util.motion';
import 'foundation-sites/js/foundation.reveal';

require('./styles/configuration-modal.scss');

function ConfigurationModal(sources) {

    const values$ = sources.props$;

    const vtree$ = Rx.Observable.just(1).map(() =&gt; {
        return div(
            '#config-modal.reveal',
            {attributes: {
                'data-reveal': ''
            }},
            ['hello']
        );
    });

    return {
        DOM: vtree$,
        values$
    };
}

$(function() {
    $.fn.foundation = foundation;
    $(document).foundation();
});

export default ConfigurationModal;
</code></pre>

<p>My main.js:</p>

<pre><code>import Rx from 'rx';
import Cycle from '@cycle/core';
import {makeDOMDriver, div} from '@cycle/dom';
import ConfigurationModal from './components/ConfigurationModal/index';

require('./styles/index.scss');

function main(sources) {
    const props$ = Rx.Observable.of({
        pomodoroDuration: 25 * 60,
        shortBreakDuration: 5 * 60,
        longBreakDuration: 15 * 60
    });
    const configurationModal = ConfigurationModal({
        DOM: sources.DOM,
        props$
    });

    return {
        DOM: configurationModal.DOM,
    };
}

Cycle.run(main, {
    DOM: makeDOMDriver('#app')
});
</code></pre>

<p>Now, if I run <code>$(document).foundation()</code> in the console once the app is initialized, things work as expected. But in the app code, since the dom is virtual and the actual html has not yet been injected, nothing appears.</p>

<p>How could I run js code after the app was fully initialized and the dom actually populated?</p>