@types/browser-sync

  • Version 2.27.5
  • Published
  • 26.1 kB
  • 4 dependencies
  • MIT license

Install

npm i @types/browser-sync
yarn add @types/browser-sync
pnpm add @types/browser-sync

Overview

TypeScript definitions for browser-sync

Index

Variables

variable browserSync

const browserSync: browserSync.BrowserSyncStatic;

    Interfaces

    interface BrowserSyncInstance

    interface BrowserSyncInstance {}

      property active

      active: boolean;
      • A simple true/false flag that you can use to determine if there's a currently-running Browsersync instance.

      property emitter

      emitter: NodeJS.EventEmitter;
      • The internal Event Emitter used by the running Browsersync instance (if there is one). You can use this to emit your own events, such as changed files, logging etc.

      property name

      name: string;
      • the name of this instance of browser-sync

      property paused

      paused: boolean;
      • A simple true/false flag to determine if the current instance is paused

      method cleanup

      cleanup: (
      fn?: (error: NodeJS.ErrnoException, bs: BrowserSyncInstance) => void
      ) => void;
      • Instance Cleanup.

      method exit

      exit: () => void;
      • This method will close any running server, stop file watching & exit the current process.

      method getOption

      getOption: (name: string) => any;
      • Callback helper to examine what options have been set.

        Parameter name

        The key to search options map for.

      method init

      init: (
      config?: Options,
      callback?: (err: Error, bs: BrowserSyncInstance) => any
      ) => BrowserSyncInstance;
      • Start the Browsersync service. This will launch a server, proxy or start the snippet mode depending on your use-case.

      method notify

      notify: (message: string, timeout?: number) => void;
      • Helper method for browser notifications

        Parameter message

        Can be a simple message such as 'Connected' or HTML

        Parameter timeout

        How long the message will remain in the browser. 1.3.0

      method pause

      pause: () => void;
      • Method to pause file change events

      method reload

      reload: {
      (): void;
      (file: string): void;
      (files: string[]): void;
      (options: { stream: boolean }): NodeJS.ReadWriteStream;
      };
      • Reload the browser The reload method will inform all browsers about changed files and will either cause the browser to refresh, or inject the files where possible.

      • Reload a single file The reload method will inform all browsers about changed files and will either cause the browser to refresh, or inject the files where possible.

      • Reload multiple files The reload method will inform all browsers about changed files and will either cause the browser to refresh, or inject the files where possible.

      • The reload method will inform all browsers about changed files and will either cause the browser to refresh, or inject the files where possible.

      method resume

      resume: () => void;
      • Method to resume paused watchers

      method stream

      stream: (opts?: StreamOptions) => NodeJS.ReadWriteStream;
      • The stream method returns a transform stream and can act once or on many files.

        Parameter opts

        Configuration for the stream method

      method use

      use: (
      module: {
      'plugin:name'?: string | undefined;
      plugin: (opts: object, bs: BrowserSyncInstance) => any;
      },
      options?: object,
      cb?: any
      ) => void;
      • Register a plugin. Must implement at least a 'plugin' property that returns callable function.

        use

        Parameter module

        The object to be required.

        Parameter options

        The

        Parameter cb

        A callback function that will return any errors.

      method watch

      watch: (
      patterns: string,
      opts?: chokidar.WatchOptions,
      fn?: (event: string, file: fs.Stats) => any
      ) => NodeJS.EventEmitter;
      • Stand alone file-watcher. Use this along with Browsersync to create your own, minimal build system

      interface BrowserSyncStatic

      interface BrowserSyncStatic extends BrowserSyncInstance {}

        property instances

        instances: BrowserSyncInstance[];

        method create

        create: (name?: string, emitter?: NodeJS.EventEmitter) => BrowserSyncInstance;
        • Create a Browsersync instance

          Parameter name

          an identifier that can used for retrieval later

        method get

        get: (name: string) => BrowserSyncInstance;
        • Get a single instance by name. This is useful if you have your build scripts in separate files

          Parameter name

          the identifier used for retrieval

        method has

        has: (name: string) => boolean;
        • Check if an instance has been created.

          Parameter name

          the name of the instance

        method reset

        reset: () => void;
        • Reset the state of the module. (should only be needed for test environments)

        call signature

        (
        config?: Options,
        callback?: (err: Error, bs: BrowserSyncInstance) => any
        ): BrowserSyncInstance;
        • Start the Browsersync service. This will launch a server, proxy or start the snippet mode depending on your use-case.

        interface CallbacksOptions

        interface CallbacksOptions {}

          property ready

          ready: (err: Error, bs: BrowserSyncInstance) => void;

            interface FileCallback

            interface FileCallback {}

              property fn

              fn: (event: string, file: string) => any;

                property match

                match?: string | string[] | undefined;

                  property options

                  options?: chokidar.WatchOptions | undefined;

                    interface FormsOptions

                    interface FormsOptions {}

                      property inputs

                      inputs: boolean;

                        property submit

                        submit: boolean;

                          property toggles

                          toggles: boolean;

                            interface GhostOptions

                            interface GhostOptions {}

                              property clicks

                              clicks?: boolean | undefined;

                                property forms

                                forms?: FormsOptions | boolean | undefined;

                                  property scroll

                                  scroll?: boolean | undefined;

                                    interface Hash

                                    interface Hash<T> {}

                                      index signature

                                      [path: string]: T;

                                        interface HttpsOptions

                                        interface HttpsOptions {}

                                          property cert

                                          cert?: string | undefined;

                                            property key

                                            key?: string | undefined;

                                              interface MiddlewareHandler

                                              interface MiddlewareHandler {}

                                                call signature

                                                (req: http.IncomingMessage, res: http.ServerResponse, next: () => void): any;

                                                  interface Options

                                                  interface Options {}

                                                    property browser

                                                    browser?: string | string[] | undefined;
                                                    • The browser(s) to open Default: default

                                                    property callbacks

                                                    callbacks?: CallbacksOptions;
                                                    • Register callbacks via a regular option - this can be used to get access the Browsersync instance in situations where you cannot provide a callback via the normal API (for example, in a Gruntfile)

                                                      This 'ready' callback can be used to access the Browsersync instance

                                                    property clientEvents

                                                    clientEvents?: string[] | undefined;
                                                    • ¯\_(ツ)_/¯ Best guess, when ghostMode (or SocketIO?) is setup the events listed here will be emitted and able to hook into.

                                                    property codeSync

                                                    codeSync?: boolean | undefined;
                                                    • Send file-change events to the browser Default: true

                                                    property cors

                                                    cors?: boolean | undefined;
                                                    • Add HTTP access control (CORS) headers to assets served by Browsersync. Default: false Note: Requires at least version 2.16.0.

                                                    property cwd

                                                    cwd?: string;
                                                    • Current working directory

                                                    property excludeFileTypes

                                                    excludeFileTypes?: string[] | undefined;
                                                    • ¯\_(ツ)_/¯

                                                    property files

                                                    files?: string | Array<string | FileCallback | object> | undefined;
                                                    • Browsersync can watch your files as you work. Changes you make will either be injected into the page (CSS & images) or will cause all browsers to do a full-page refresh. See anymatch for more information on glob patterns. Default: false

                                                    property ghostMode

                                                    ghostMode?: GhostOptions | boolean | undefined;
                                                    • Clicks, Scrolls & Form inputs on any device will be mirrored to all others. clicks - Default: true scroll - Default: true forms - Default: true

                                                    property host

                                                    host?: string | undefined;
                                                    • Override host detection if you know the correct IP to use

                                                    property httpModule

                                                    httpModule?: string | undefined;
                                                    • Override http module to allow using 3rd party server modules (such as http2).

                                                    property https

                                                    https?: boolean | HttpsOptions | undefined;
                                                    • Enable https for localhost development. Note: This may not be needed for proxy option as it will try to infer from your target url. Note: If privacy error is encountered please see HttpsOptions below, setting those will resolve. Note: Requires at least version 1.3.0.

                                                    property ignore

                                                    ignore?: string[] | undefined;
                                                    • Patterns for any watchers to ignore. Anything provided here will end up inside 'watchOptions.ignored'.

                                                    property injectChanges

                                                    injectChanges?: boolean | undefined;
                                                    • Whether to inject changes (rather than a page refresh) Default: true

                                                    property injectFileTypes

                                                    injectFileTypes?: string[] | undefined;
                                                    • ¯\_(ツ)_/¯

                                                    property listen

                                                    listen?: string;
                                                    • Specify a host to listen on. Use this if you want to prevent binding to all interfaces.

                                                      Note: When you specify this option, it overrides the 'host' option

                                                    property localOnly

                                                    localOnly?: boolean | undefined;
                                                    • Support environments where dynamic hostnames are not required (ie: electron).

                                                    property logConnections

                                                    logConnections?: boolean | undefined;
                                                    • Whether or not to log connections Default: false

                                                    property logFileChanges

                                                    logFileChanges?: boolean | undefined;
                                                    • Whether or not to log information about changed files Default: false

                                                    property logLevel

                                                    logLevel?: LogLevel | undefined;
                                                    • Can be either "info", "debug", "warn", or "silent" Default: info

                                                    property logPrefix

                                                    logPrefix?: string | undefined;
                                                    • Change the console logging prefix. Useful if you're creating your own project based on Browsersync Default: BS Note: Requires at least version 1.5.1.

                                                    property logSnippet

                                                    logSnippet?: boolean | undefined;
                                                    • Log the snippet to the console when you're in snippet mode (no proxy/server) Default: true Note: Requires at least version 1.5.2.

                                                    property middleware

                                                    middleware?:
                                                    | MiddlewareHandler
                                                    | PerRouteMiddleware
                                                    | Array<MiddlewareHandler | PerRouteMiddleware>
                                                    | undefined;
                                                    • Functions or actual plugins used as middleware.

                                                    property minify

                                                    minify?: boolean | undefined;
                                                    • Whether to minify the client script Default: true

                                                    property notify

                                                    notify?: boolean | undefined;
                                                    • The small pop-over notifications in the browser are not always needed/wanted. Default: true

                                                    property online

                                                    online?: boolean | undefined;
                                                    • Some features of Browsersync (such as xip & tunnel) require an internet connection, but if you're working offline, you can reduce start-up time by setting this option to false

                                                    property open

                                                    open?: OpenOptions | boolean | undefined;
                                                    • Default: true Decide which URL to open automatically when Browsersync starts. Defaults to "local" if none set. Can be true, local, external, ui, ui-external, tunnel or false

                                                    property plugins

                                                    plugins?: any[] | undefined;
                                                    • User provided plugins Default: [] Note: Requires at least version 2.6.0.

                                                    property port

                                                    port?: number | undefined;
                                                    • Use a specific port (instead of the one auto-detected by Browsersync) Default: 3000

                                                    property proxy

                                                    proxy?: string | ProxyOptions | undefined;
                                                    • Proxy an EXISTING vhost. Browsersync will wrap your vhost with a proxy URL to view your site. Passing only a URL as a string equates to passing only target property of ProxyOptions type. target - Default: undefined ws - Default: undefined middleware - Default: undefined reqHeaders - Default: undefined proxyRes - Default: undefined (http.ServerResponse if expecting single parameter) proxyReq - Default: undefined

                                                    property reloadDebounce

                                                    reloadDebounce?: number | undefined;
                                                    • Restrict the frequency in which browser:reload events can be emitted to connected clients Default: 0 Note: Requires at least version 2.6.0.

                                                    property reloadDelay

                                                    reloadDelay?: number | undefined;
                                                    • Time, in milliseconds, to wait before instructing the browser to reload/inject following a file change event Default: 0

                                                    property reloadOnRestart

                                                    reloadOnRestart?: boolean | undefined;
                                                    • Reload each browser when Browsersync is restarted. Default: false

                                                    property reloadThrottle

                                                    reloadThrottle?: number | undefined;
                                                    • Emit only the first event during sequential time windows of a specified duration. Note: Requires at least version 2.13.0.

                                                    property rewriteRules

                                                    rewriteRules?: boolean | RewriteRules[] | undefined;
                                                    • Add additional HTML rewriting rules. Default: false Note: Requires at least version 2.4.0.

                                                    property script

                                                    script?: ScriptOptions | undefined;
                                                    • Configure the script domain

                                                    property scriptPath

                                                    scriptPath?: ((path: string) => string) | undefined;
                                                    • Alter the script path for complete control over where the Browsersync Javascript is served from. Whatever you return from this function will be used as the script path. Note: Requires at least version 1.5.0.

                                                    property scrollElementMapping

                                                    scrollElementMapping?: string[] | undefined;
                                                    • Default: [] Note: Requires at least version 2.9.0. Sync the scroll position of any element on the page - where any scrolled element will cause all others to match scroll position. This is helpful when a breakpoint alters which element is actually scrolling

                                                    property scrollElements

                                                    scrollElements?: string[] | undefined;
                                                    • Sync the scroll position of any element on the page. Add any amount of CSS selectors Default: [] Note: Requires at least version 2.9.0.

                                                    property scrollProportionally

                                                    scrollProportionally?: boolean | undefined;
                                                    • scrollProportionally: false // Sync viewports to TOP position Default: true

                                                    property scrollRestoreTechnique

                                                    scrollRestoreTechnique?: string | undefined;
                                                    • Decide which technique should be used to restore scroll position following a reload. Can be window.name or cookie Default: 'window.name'

                                                    property scrollThrottle

                                                    scrollThrottle?: number | undefined;
                                                    • How often to send scroll events Default: 0

                                                    property server

                                                    server?: string | boolean | string[] | ServerOptions | undefined;
                                                    • Use the built-in static server for basic HTML/JS/CSS websites. Default: false

                                                    property serveStatic

                                                    serveStatic?: StaticOptions[] | string[] | undefined;
                                                    • Add additional directories from which static files should be served. Should only be used in proxy or snippet mode. Default: [] Note: Requires at least version 2.8.0.

                                                    property serveStaticOptions

                                                    serveStaticOptions?: ServeStaticOptions | undefined;
                                                    • Options that are passed to the serve-static middleware when you use the string[] syntax: eg: serveStatic: ['./app']. Please see [serve-static](https://github.com/expressjs/serve-static) for details.

                                                    property single

                                                    single?: boolean | undefined;
                                                    • Serve an index.html file for all non-asset routes. Useful when using client-routers.

                                                    property snippetOptions

                                                    snippetOptions?: SnippetOptions | undefined;
                                                    • You can control how the snippet is injected onto each page via a custom regex + function. You can also provide patterns for certain urls that should be ignored from the snippet injection. Note: Requires at least version 2.0.0.

                                                    property socket

                                                    socket?: SocketOptions | undefined;
                                                    • Configure the Socket.IO path and namespace & domain to avoid collisions. path - Default: "/browser-sync/socket.io" clientPath - Default: "/browser-sync" namespace - Default: "/browser-sync" domain - Default: undefined port - Default: undefined clients.heartbeatTimeout - Default: 5000 Note: Requires at least version 1.6.2.

                                                    property startPath

                                                    startPath?: string | undefined;
                                                    • The initial path to load

                                                    property tagNames

                                                    tagNames?: TagNamesOptions | undefined;
                                                    • ¯\_(ツ)_/¯

                                                    property timestamps

                                                    timestamps?: boolean | undefined;
                                                    • Append timestamps to injected files Default: true

                                                    property tunnel

                                                    tunnel?: string | boolean | undefined;
                                                    • Tunnel the Browsersync server through a random Public URL Default: null

                                                    property ui

                                                    ui?: UIOptions | boolean | undefined;
                                                    • Browsersync includes a user-interface that is accessed via a separate port. The UI allows to controls all devices, push sync updates and much more.

                                                      port - Default: 3001 weinre.port - Default: 8080 Note: Requires at least version 2.0.0.

                                                    property watch

                                                    watch?: boolean | undefined;
                                                    • Watch files automatically.

                                                    property watchEvents

                                                    watchEvents?: WatchEvents | string[] | undefined;
                                                    • Specify which file events to respond to. Available events: add, change, unlink, addDir, unlinkDir

                                                    property watchOptions

                                                    watchOptions?: chokidar.WatchOptions | undefined;
                                                    • File watching options that get passed along to Chokidar. Check their docs for available options Default: undefined Note: Requires at least version 2.6.0.

                                                    property xip

                                                    xip?: boolean | undefined;
                                                    • Requires an internet connection - useful for services such as Typekit as it allows you to configure domains such as *.xip.io in your kit settings Default: false

                                                    interface PerRouteMiddleware

                                                    interface PerRouteMiddleware {}

                                                      property handle

                                                      handle: MiddlewareHandler;

                                                        property id

                                                        id?: string | undefined;

                                                          property route

                                                          route: string;

                                                            interface ProxyOptions

                                                            interface ProxyOptions {}

                                                              property error

                                                              error?:
                                                              | ((
                                                              err: NodeJS.ErrnoException,
                                                              req: http.IncomingMessage,
                                                              res: http.ServerResponse
                                                              ) => void)
                                                              | undefined;

                                                                property middleware

                                                                middleware?: MiddlewareHandler | undefined;

                                                                  property proxyReq

                                                                  proxyReq?:
                                                                  | Array<(res: http.IncomingMessage) => void>
                                                                  | ((res: http.IncomingMessage) => void)
                                                                  | undefined;

                                                                    property proxyRes

                                                                    proxyRes?: ProxyResponseMiddleware | ProxyResponseMiddleware[] | undefined;

                                                                      property reqHeaders

                                                                      reqHeaders?: ((config: object) => Hash<object>) | undefined;

                                                                        property target

                                                                        target?: string | undefined;

                                                                          property ws

                                                                          ws?: boolean | undefined;

                                                                            interface ProxyResponseMiddleware

                                                                            interface ProxyResponseMiddleware {}

                                                                              call signature

                                                                              (
                                                                              proxyRes: http.ServerResponse | http.IncomingMessage,
                                                                              res: http.ServerResponse,
                                                                              req: http.IncomingMessage
                                                                              ): void;

                                                                                interface RewriteRules

                                                                                interface RewriteRules {}

                                                                                  property fn

                                                                                  fn?:
                                                                                  | ((
                                                                                  req: http.IncomingMessage,
                                                                                  res: http.ServerResponse,
                                                                                  match: string
                                                                                  ) => string)
                                                                                  | undefined;

                                                                                    property match

                                                                                    match: RegExp;

                                                                                      property replace

                                                                                      replace?: string | undefined;

                                                                                        interface ScriptOptions

                                                                                        interface ScriptOptions {}

                                                                                          property domain

                                                                                          domain?: string | undefined;

                                                                                            interface ServerOptions

                                                                                            interface ServerOptions {}

                                                                                              property baseDir

                                                                                              baseDir?: string | string[] | undefined;
                                                                                              • set base directory

                                                                                              property directory

                                                                                              directory?: boolean | undefined;
                                                                                              • enable directory listing

                                                                                              property index

                                                                                              index?: string | undefined;
                                                                                              • set index filename

                                                                                              property middleware

                                                                                              middleware?: Array<MiddlewareHandler | PerRouteMiddleware> | undefined;
                                                                                              • configure custom middleware

                                                                                              property routes

                                                                                              routes?: Hash<string> | undefined;
                                                                                              • key-value object hash, where the key is the url to match, and the value is the folder to serve (relative to your working directory)

                                                                                              property serveStaticOptions

                                                                                              serveStaticOptions?: ServeStaticOptions | undefined;

                                                                                                interface SnippetOptions

                                                                                                interface SnippetOptions {}

                                                                                                  property async

                                                                                                  async?: boolean | undefined;

                                                                                                    property blacklist

                                                                                                    blacklist?: string[] | undefined;

                                                                                                      property rule

                                                                                                      rule?:
                                                                                                      | {
                                                                                                      match?: RegExp | undefined;
                                                                                                      fn?: ((snippet: string, match: string) => any) | undefined;
                                                                                                      }
                                                                                                      | undefined;

                                                                                                        property whitelist

                                                                                                        whitelist?: string[] | undefined;

                                                                                                          interface SocketOptions

                                                                                                          interface SocketOptions {}

                                                                                                            property clientPath

                                                                                                            clientPath?: string | undefined;

                                                                                                              property clients

                                                                                                              clients?: { heartbeatTimeout?: number | undefined } | undefined;

                                                                                                                property domain

                                                                                                                domain?: string | undefined;

                                                                                                                  property namespace

                                                                                                                  namespace?: string | undefined;

                                                                                                                    property path

                                                                                                                    path?: string | undefined;

                                                                                                                      property port

                                                                                                                      port?: number | undefined;

                                                                                                                        interface StaticOptions

                                                                                                                        interface StaticOptions {}

                                                                                                                          property dir

                                                                                                                          dir: string | string[];

                                                                                                                            property route

                                                                                                                            route: string | string[];

                                                                                                                              interface StreamOptions

                                                                                                                              interface StreamOptions {}

                                                                                                                                property match

                                                                                                                                match?: mm.Pattern | mm.Pattern[] | undefined;

                                                                                                                                  property once

                                                                                                                                  once?: boolean | undefined;

                                                                                                                                    interface TagNamesOptions

                                                                                                                                    interface TagNamesOptions {}

                                                                                                                                      property css

                                                                                                                                      css?: string | undefined;

                                                                                                                                        property gif

                                                                                                                                        gif?: string | undefined;

                                                                                                                                          property jpeg

                                                                                                                                          jpeg?: string | undefined;

                                                                                                                                            property jpg

                                                                                                                                            jpg?: string | undefined;

                                                                                                                                              property js

                                                                                                                                              js?: string | undefined;

                                                                                                                                                property less

                                                                                                                                                less?: string | undefined;

                                                                                                                                                  property png

                                                                                                                                                  png?: string | undefined;

                                                                                                                                                    property scss

                                                                                                                                                    scss?: string | undefined;

                                                                                                                                                      property svg

                                                                                                                                                      svg?: string | undefined;

                                                                                                                                                        interface UIOptions

                                                                                                                                                        interface UIOptions {}

                                                                                                                                                          property port

                                                                                                                                                          port?: number | undefined;
                                                                                                                                                          • set the default port

                                                                                                                                                          property weinre

                                                                                                                                                          weinre?:
                                                                                                                                                          | {
                                                                                                                                                          port?: number | undefined;
                                                                                                                                                          }
                                                                                                                                                          | undefined;
                                                                                                                                                          • set the default weinre port

                                                                                                                                                          Type Aliases

                                                                                                                                                          type LogLevel

                                                                                                                                                          type LogLevel = 'info' | 'debug' | 'warn' | 'silent';

                                                                                                                                                            type OpenOptions

                                                                                                                                                            type OpenOptions = 'local' | 'external' | 'ui' | 'ui-external' | 'tunnel';

                                                                                                                                                              type WatchEvents

                                                                                                                                                              type WatchEvents = 'add' | 'change' | 'unlink' | 'addDir' | 'unlinkDir';

                                                                                                                                                                Package Files (1)

                                                                                                                                                                Dependencies (4)

                                                                                                                                                                Dev Dependencies (0)

                                                                                                                                                                No dev dependencies.

                                                                                                                                                                Peer Dependencies (0)

                                                                                                                                                                No peer dependencies.

                                                                                                                                                                Badge

                                                                                                                                                                To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/browser-sync.

                                                                                                                                                                • Markdown
                                                                                                                                                                  [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/browser-sync)
                                                                                                                                                                • HTML
                                                                                                                                                                  <a href="https://www.jsdocs.io/package/@types/browser-sync"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>