Browser Scan Scanner

Brwoser Scan scanner package is a collection of utility API's for integrating browser scan into your Apps

Table of Contents

• Installation
• Usage
  • Entities
    • Browsers
    • Versions
  • Web
    • Hooks
      • useBrowsers
      • useVersions
      • useScanner
    • Providers

Installation

yarn add @browser-scan/scanner

or if you are using npm

npm i @browser-scan/scanner

import {<your_imports>} from "@browser-scan/scanner";

Usage

The scanner package offers essential utilities and entites for your app to run browser scan

Utilities are offered in the form react hooks which consumes the entities using Rest API's

NOTE: Browser Scan is a React based application so only React apps can add browser scan to their applications

Scanner uses react-query to query data from the API.

The underlying logic of the scanner package is flavoured by browserslist and doiuse which are third party tools which themselves uses 'can i use database' to produce the desired results

Entities

Several data points needed in your apps are organised in entities

Browsers

List of supported browsers by this package

{
  "and_chr": "Android Chrome",
  "and_ff": "Android Firefox",
  "and_uc": "Android UC",
  "ios_saf": "iOS Safari",
  "op_mob": "Opera Mobile",
  "android": "Android",
  "chrome": "Chrome",
  "firefox": "Firefox",
  "op_mini": "Opera Mini",
  "opera": "Opera",
  "safari": "Safari",
  "edge": "Edge",
  "samsung": "Samsung"
}

import { getAvailableBrowsers } from "@browser-scan/scanner";

The keys in the above Map is used as query for browserlist to be enable to support versionings and can I use

Versions

Represents the list of supported browser versions

for instance Chrome supports the following versions

const versions_of_chrome = [ "103", "102", "101", "100", "99", "98", "97", "96", "95", "94", ....upto "4", ];

Web

Utilities needed in your web app is organised inside the web folder

This folder mainly consists of hooks fetching data from the scanner/api

useBrowsers

Gives the list of supported browsers with a loading and fetched state

export const YourComponent = () => {
  const { data, isLoading, isFetched } = useBrowsers();
};

NOTE: The result is cached in your react-query environment. So once after fetched the useBrowsers can be used anywhere in your application without having to fetch again from server

NOTE: Make Sure your app is wrapped inside the <ScannerProvider />

useVersions

This hooks gives the list of supported versions of a browser.

export const YourComponent = () => {
  const { data, isLoading, isFetched } = useVersions("and_chr");
};

The entire useQuery return value is exposed by this hook to support refetching capablities

example

export const YourComponent = ({ browser }, { browser: Browsers }) => {
  const { data, isLoading, isFetched, refetch } = useVersions(browser);

  useEffect(() => {
    // This will refetch the versions when the browser changes
    refetch();
  }, [browser]);
};

NOTE: For cleaner API purposes the refetching logic is not part of the hook but rather an available feature

useScanner

This module consists of two hooks

1. useStreamScanner
2. useFileScanner

useStreamScnnaer

This hooks fetches the results of a the scan in chunks from the streaming API.

This is useful for scanning a project which has more than usual number of style files

The hooks exposes a startStreaming function which can be invoked on demand

const { data, startStreaming } = useStreamScanner();

const onScan = () => {
  startStreaming(body:StreamScannerRequest);
};

useFileScanner

This hook scans a single style file and produces the result in a single pass

This is useful for scanning files individually

This hook also exposes a 'scanFile' function which can be invoked on demand

const { data, scanFile } = useFileScanner();
const onScanFile = () => {
  scanFile(body:NonStreamScannerRequest)
};

NOTE: Both the scanner hooks fetches data on Demand i.e on explicitly calling the scanning functions

Providers

Scanner Provider is wrapping provider component which provides the react-query query client to your app

<ScannerProvider>
  <YourApp />
</ScannerProvider>