import { createComponent as component, render } from 'solid-js/web';
/**
 * This utils function automatically merge the provider in the order they
 * were provided. It turns the following calls:
 *
 * const app = createApp(App)
 *
 * app.use(RouterProvider)
 * app.use(I18nProvider, { dict })
 * app.use(GlobalStoreProvider)
 *
 * app.mount('#app')
 *
 * into something like that:
 *
 * render(
 *   <RouterProvider>
 *     <I18nProvider dict={dict}>
 *       <GlobalStoreProvider>
 *         <App />
 *       </GlobalStoreProvider>
 *     </I18nProvider>
 *   </RouterProvider>,
 *   document.querySelector('#app')
 *  )
 */
function mergeProviders({ app, props = {}, providers }) {
    return providers.reduceRight((application, { provider, opts = {} }) => () => component(provider, {
        ...opts,
        get children() {
            return application();
        },
    }), () => component(app, props));
}
export function createApp(app, props) {
    const providers = [];
    const _app = {
        use(provider, opts = {}) {
            providers.push({ provider, opts });
            return _app;
        },
        mount(dom) {
            const application = mergeProviders({ app, props, providers });
            const root = typeof dom === 'string' ? document.querySelector(dom) : dom;
            return render(application, root);
        },
    };
    return _app;
}