@typed/fp/esm/dom.js

Data Structures and Resources for fp-ts

import * as E from './Env';
import * as EO from './EnvOption';
import * as Fail from './Fail';
import { pipe } from './function';
import * as O from './Option';
import * as RS from './ReaderStream';
import * as S from './Stream';
import { useReaderStream } from './Use';
/**
 * @category DOM
 * @since 0.13.2
 */
export const getHistory = E.asks((e) => e.history);
/**
 * @category DOM
 * @since 0.13.2
 */
export const getLocation = E.asks((e) => e.location);
/**
 * @category Effect
 * @since 0.13.2
 */
export const raf = (e) => e.raf;
/**
 * @category Effect
 * @since 0.13.2
 */
export const whenIdle = (e) => e.whenIdle;
/**
 * @category DOM
 * @since 0.13.2
 */
export const getWindow = E.asks((e) => e.window);
/**
 * @category DOM
 * @since 0.13.2
 */
export const getDocument = E.asks((e) => e.document);
/**
 * @category DOM
 * @since 0.13.2
 */
export const getRootElement = E.asks((e) => e.rootElement);
/**
 * @category DOM
 * @since 0.13.2
 */
export const querySelector = (selector) => (el) => O.fromNullable(el.querySelector(selector));
/**
 * @category DOM
 * @since 0.13.2
 */
export const querySelectorAll = (selector) => (el) => Array.from(el.querySelectorAll(selector));
/**
 * A Failure used to represent being unable to query for our RootElement
 * @category Failure
 * @since 0.13.4
 */
export const QueryRootElementFailure = Fail.named()('@typed/fp/dom/QueryRootElementError');
/**
 * Provide the root element to your application by querying for an element in the document
 * @category DOM
 * @since 0.13.2
 */
export const queryRootElement = (selector) => pipe(getDocument, E.map(querySelector(selector)), EO.map((rootElement) => ({ rootElement })), EO.getOrElseEW(() => QueryRootElementFailure.throw({
    selector,
    message: `Unable to find root element by selector ${selector}!`,
})));
/**
 * Common setup for rendering an application into an element
 * @category DOM
 * @since 0.13.4
 */
export const patch = (patch) => (stream) => pipe(getRootElement, RS.fromEnv, RS.switchMapW((rootElement) => pipe(stream, RS.scan(patch, rootElement))));
/**
 * @category Use
 * @since 0.13.4
 */
export const useEventListener = (getEventListener, eventName, onEvent) => {
    const use = useReaderStream();
    return pipe(getEventListener, EO.chainEnvK((target) => use(pipe(S.newStream((sink, scheduler) => {
        const listener = (ev) => sink.event(scheduler.currentTime(), ev);
        target.addEventListener(eventName, listener);
        return { dispose: () => target.removeEventListener(eventName, listener) };
    }), RS.fromStream, RS.chainEnvK(onEvent)), target)), E.map(O.flatten));
};
/**
 * @category Use
 * @since 0.13.2
 */
export const usePopstate = () => pipe(useEventListener(pipe(getWindow, EO.fromEnv), 'popstate', () => getState), EO.getOrElseEW(() => getState));
/**
 * @category Use
 * @since 0.13.2
 */
export const useHashChange = () => pipe(useEventListener(pipe(getWindow, EO.fromEnv), 'hashchange', () => getHash), EO.getOrElseEW(() => getHash));
/**
 * @category Use
 * @since 0.13.2
 */
export const useWhenUrlChanges = (env) => pipe(env, E.apFirstW(usePopstate()), E.apFirstW(useHashChange()));
/**
 * @category Use
 * @since 0.13.2
 */
export const useLocation = useWhenUrlChanges(getLocation);
/**
 * @category Use
 * @since 0.13.2
 */
export const useHistory = useWhenUrlChanges(getHistory);
/**
 * @category History
 * @since 0.13.2
 */
export const pushState = (state, path) => pipe(getHistory, E.chainW((history) => E.fromIO(() => history.pushState(state, '', path))));
/**
 * @category History
 * @since 0.13.2
 */
export const navigateTo = (path) => pushState(null, path);
/**
 * @category History
 * @since 0.13.2
 */
export const replaceState = (state, path) => pipe(getHistory, E.chainW((history) => E.fromIO(() => history.replaceState(state, '', path))));
/**
 * @category History
 * @since 0.13.2
 */
export const getState = pipe(getHistory, E.map(({ state }) => state));
/**
 * @category History
 * @since 0.13.3
 */
export const goBack = pipe(getHistory, E.chainW((history) => E.fromIO(() => history.back())));
/**
 * @category History
 * @since 0.13.3
 */
export const goForward = pipe(getHistory, E.chainW((history) => E.fromIO(() => history.forward())));
/**
 * @category History
 * @since 0.13.3
 */
export const goTo = (n) => pipe(getHistory, E.chainW((history) => E.fromIO(() => history.go(n))));
/**
 * @category Location
 * @since 0.13.2
 */
export const reload = pipe(getLocation, E.chainW((l) => E.fromIO(() => l.reload())));
/**
 * @category Location
 * @since 0.13.2
 */
export const assign = (url) => pipe(getLocation, E.chainW((l) => E.fromIO(() => l.assign(url))));
/**
 * @category Location
 * @since 0.13.3
 */
export const getHash = pipe(getLocation, E.map((l) => l.hash));
/**
 * @category Location
 * @since 0.13.3
 */
export const getPathname = pipe(getLocation, E.map((l) => l.pathname));
/**
 * @category Location
 * @since 0.13.3
 */
export const getOrigin = pipe(getLocation, E.map((l) => l.origin));
/**
 * @category Location
 * @since 0.13.3
 */
export const getHref = pipe(getLocation, E.map((l) => l.href));
/**
 * @category Location
 * @since 0.13.3
 */
export const getHost = pipe(getLocation, E.map((l) => l.host));
/**
 * @category Location
 * @since 0.13.3
 */
export const getHostname = pipe(getLocation, E.map((l) => l.hostname));
/**
 * @category Location
 * @since 0.13.3
 */
export const getPort = pipe(getLocation, E.map((l) => l.port));
/**
 * @category Location
 * @since 0.13.3
 */
export const getProtocol = pipe(getLocation, E.map((l) => l.protocol));
/**
 * @category Location
 * @since 0.13.3
 */
export const getSearch = pipe(getLocation, E.map((l) => l.search));
//# sourceMappingURL=dom.js.map