Connectivity

import { makeConnectivityListener } from "@solid-primitives/connectivity";

const clear = makeConnectivityListener(isOnline => {
  console.log(isOnline); // T: boolean
});
// remove event listeners (happens also on cleanup)
clear();

function makeConnectivityListener(callback: (isOnline: boolean) => void): VoidFunction;

import { createConnectivitySignal } from "@solid-primitives/connectivity";

const isOnline = createConnectivitySignal();
isOnline(); // T: boolean

function createConnectivitySignal(): Accessor<boolean>;

import { useConnectivitySignal } from "@solid-primitives/connectivity";

const isOnline = useConnectivitySignal();
isOnline(); // T: boolean

import { makeNetworkInformation } from "@solid-primitives/connectivity";

const clear = makeNetworkInformation(state => {
  console.log(state.online, state.effectiveType, state.downlink);
});
clear();

function makeNetworkInformation(callback: (state: NetworkState) => void): VoidFunction;

import { createNetworkInformation } from "@solid-primitives/connectivity";

const { online, effectiveType, downlink, rtt, saveData, type } = createNetworkInformation();

// adapt asset quality to connection
const imageQuality = () => {
  if (!online() || saveData()) return "low";
  if (effectiveType() === "4g") return "high";
  return "medium";
};

// show a warning banner when on a slow connection
<Show when={effectiveType() === "2g" || effectiveType() === "slow-2g"}>
  <Banner>Slow connection detected — some features may be limited.</Banner>
</Show>

function createNetworkInformation(): NetworkInformationReturn;

type NetworkInformationReturn = {
  online: Accessor<boolean>;
  downlink: Accessor<number | undefined>; // bandwidth estimate in Mbit/s
  downlinkMax: Accessor<number | undefined>; // max downlink speed (non-standard)
  effectiveType: Accessor<EffectiveConnectionType | undefined>; // "slow-2g" | "2g" | "3g" | "4g"
  rtt: Accessor<number | undefined>; // estimated round-trip time in ms
  saveData: Accessor<boolean | undefined>; // user has requested reduced data usage
  type: Accessor<ConnectionType | undefined>; // underlying connection technology
};

type EffectiveConnectionType = "slow-2g" | "2g" | "3g" | "4g";
type ConnectionType =
  | "bluetooth"
  | "cellular"
  | "ethernet"
  | "none"
  | "wifi"
  | "wimax"
  | "other"
  | "unknown";

import { useNetworkInformation } from "@solid-primitives/connectivity";

const { online, effectiveType } = useNetworkInformation();

type NetworkState = {
  online: boolean;
  downlink: number | undefined;
  downlinkMax: number | undefined;
  effectiveType: EffectiveConnectionType | undefined;
  rtt: number | undefined;
  saveData: boolean | undefined;
  type: ConnectionType | undefined;
};