• Version 8.0.0
  • Published
  • 450 kB
  • 1 dependency
  • MIT license


npm i preboot
yarn add preboot
pnpm add preboot


Record server view events and play back to Angular client view



variable defaultOptions

const defaultOptions: PrebootOptions;

    variable initFunctionName

    const initFunctionName: string;

      variable ɵa

      const ɵa: any;

        variable ɵc

        const ɵc: {
        provide: any;
        useFactory: typeof PREBOOT_FACTORY;
        deps: (
        | typeof EventReplayer
        | InjectionToken<PrebootOptions>
        | Optional[]
        | typeof ApplicationRef
        multi: boolean;

          variable PREBOOT_NONCE

          const PREBOOT_NONCE: any;


            function assign

            assign: (target: Object, ...optionSets: any[]) => Object;
            • Object.assign() is not fully supporting in TypeScript, so this is just a simple implementation of it

              Parameter target

              The target object

              Parameter optionSets

              Any number of addition objects that are added on top of the target


              A new object that contains all the merged values

            function createBuffer

            createBuffer: (root: ServerClientRoot) => HTMLElement;
            • Create buffer for a given node

              Parameter root

              All the data related to a particular app


              Returns the root client node.

            function createListenHandler

            createListenHandler: (
            _document: Document,
            prebootData: PrebootData,
            eventSelector: EventSelector,
            appData: PrebootAppData
            ) => EventListener;
            • Create handler for events that we will record

            function createOverlay

            createOverlay: (_document: Document) => HTMLElement | undefined;
            • Create an overlay div and add it to the DOM so it can be used if a freeze event occurs

              Parameter _document

              The global document object (passed in for testing purposes)


              Element The overlay node is returned

            function getAppRoot

            getAppRoot: (
            _document: Document,
            opts: PrebootOptions,
            serverNode: HTMLElement
            ) => ServerClientRoot;
            • Get references to the current app root node based on input options. Users can initialize preboot either by specifying appRoot which is just one or more selectors for apps. This section option is useful for people that are doing their own buffering (i.e. they have their own client and server view)

              Parameter _document

              The global document object used to attach the overlay

              Parameter opts

              Options passed in by the user to init()

              Parameter serverNode

              The server node serving as application root


              ServerClientRoot An array of root info for the current app

            function getEventRecorderCode

            getEventRecorderCode: () => string;
            • Get the event recorder code based on all functions in event.recorder.ts and the getNodeKeyForPreboot function.

            function getInlineDefinition

            getInlineDefinition: (customOptions?: PrebootOptions) => string;
            • Used by the server side version of preboot. The main purpose is to get the inline code that can be inserted into the server view. Returns the definitions of the prebootInit function called in code returned by getInlineInvocation for each server node separately.

              Parameter customOptions

              PrebootRecordOptions that override the defaults


              Generated inline preboot code with just functions definitions to be used separately

            function getInlineInvocation

            getInlineInvocation: () => string;
            • Used by the server side version of preboot. The main purpose is to get the inline code that can be inserted into the server view. Invokes the prebootInit function defined in getInlineDefinition with proper parameters. Each appRoot should get a separate inlined code from a separate call to getInlineInvocation but only one inlined code from getInlineDefinition.


              Generated inline preboot code with just invocations of functions from getInlineDefinition

            function getNodeKeyForPreboot

            getNodeKeyForPreboot: (nodeContext: NodeContext) => string;
            • Attempt to generate key from node position in the DOM

            function getSelection

            getSelection: (node: HTMLInputElement) => PrebootSelection;
            • Get the selection data that is later used to set the cursor after client view is active

            function handleEvents

            handleEvents: (
            _document: Document,
            prebootData: PrebootData,
            appData: PrebootAppData,
            eventSelector: EventSelector
            ) => void;
            • Under given server root, for given selector, record events

              Parameter _document

              Parameter prebootData

              Parameter appData

              Parameter eventSelector

            function initAll

            initAll: (opts: PrebootOptions, win?: PrebootWindow) => () => void;
            • Called right away to initialize preboot

              Parameter opts

              All the preboot options

              Parameter win

            function ɵb

            ɵb: (
            doc: Document,
            prebootOpts: PrebootOptions,
            nonce: string | null,
            platformId: Object,
            appRef: any,
            eventReplayer: EventReplayer
            ) => () => void;

              function start

              start: (prebootData: PrebootData, win?: PrebootWindow) => void;
              • Start up preboot by going through each app and assigning the appropriate handlers. Normally this wouldn't be called directly, but we have set it up so that it can for older versions of Universal.

                Parameter prebootData

                Global preboot data object that contains options and will have events

                Parameter win

                Optional param to pass in mock window for testing purposes

              function stringifyWithFunctions

              stringifyWithFunctions: (obj: Object) => string;
              • Stringify an object and include functions. This is needed since we are letting users pass in options that include custom functions for things like the freeze handler or action when an event occurs

                Parameter obj

                This is the object you want to stringify that includes some functions


                The stringified version of an object

              function validateOptions

              validateOptions: (opts: PrebootOptions) => void;
              • Throw an error if issues with any options

                Parameter opts


              class EventReplayer

              class EventReplayer {}

                property clientNodeCache

                clientNodeCache: { [key: string]: Element };

                  property replayStarted

                  replayStarted: boolean;

                    property win

                    win: PrebootWindow;

                      method cleanup

                      cleanup: (prebootData: PrebootData) => void;
                      • Finally, set focus, remove all the event listeners and remove any freeze screen that may be there

                        Parameter prebootData

                      method findClientNode

                      findClientNode: (serverNodeContext: NodeContext) => HTMLElement | null;
                      • Given a node from the server rendered view, find the equivalent node in the client rendered view. We do this by the following approach: 1. take the name of the server node tag (ex. div or h1 or input) 2. add either id (ex. div#myid) or class names (ex. div.class1.class2) 3. use that value as a selector to get all the matching client nodes 4. loop through all client nodes found and for each generate a key value 5. compare the client key to the server key; once there is a match, we have our client node

                        NOTE: this only works when the client view is almost exactly the same as the server view. we will need an improvement here in the future to account for situations where the client view is different in structure from the server view

                      method getWindow

                      getWindow: () => PrebootWindow;
                      • Window setting and getter to facilitate testing of window in non-browser environments

                      method replayAll

                      replayAll: () => void;
                      • Replay all events for all apps. this can only be run once. if called multiple times, will only do something once

                      method replayEvent

                      replayEvent: (appData: PrebootAppData, prebootEvent: PrebootEvent) => void;
                      • Replay one particular event

                        Parameter appData

                        Parameter prebootEvent

                      method replayForApp

                      replayForApp: (appData: PrebootAppData) => void;
                      • Replay all events for one app (most of the time there is just one app)

                        Parameter appData

                      method setFocus

                      setFocus: (activeNode: NodeContext) => void;

                        method setWindow

                        setWindow: (win: PrebootWindow) => void;
                        • Window setting and getter to facilitate testing of window in non-browser environments

                        method switchBuffer

                        switchBuffer: (appData: PrebootAppData) => void;
                        • Switch the buffer for one particular app (i.e. display the client view and destroy the server view)

                          Parameter appData

                        class PrebootModule

                        class PrebootModule {}

                          method withConfig

                          static withConfig: (opts: PrebootOptions) => any;


                            interface DomEvent

                            interface DomEvent {}

                              property target

                              target?: any;

                                property type

                                type?: string;

                                  property which

                                  which?: number;

                                    method preventDefault

                                    preventDefault: () => void;

                                      interface EventSelector

                                      interface EventSelector {}
                                      • Copyright Google LLC All Rights Reserved.

                                        Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at

                                      property action

                                      action?: Function;

                                        property events

                                        events: string[];

                                          property freeze

                                          freeze?: boolean;

                                            property keyCodes

                                            keyCodes?: number[];

                                              property preventDefault

                                              preventDefault?: boolean;

                                                property replay

                                                replay?: boolean;

                                                  property selector

                                                  selector: string;

                                                    interface NodeContext

                                                    interface NodeContext {}

                                                      property node

                                                      node: Element;

                                                        property nodeKey

                                                        nodeKey?: string;

                                                          property root

                                                          root: ServerClientRoot;

                                                            property selection

                                                            selection?: PrebootSelection;

                                                              interface PrebootAppData

                                                              interface PrebootAppData {}

                                                                property events

                                                                events: PrebootEvent[];

                                                                  property root

                                                                  root: ServerClientRoot;

                                                                    interface PrebootData

                                                                    interface PrebootData {}

                                                                      property activeNode

                                                                      activeNode?: NodeContext;

                                                                        property apps

                                                                        apps?: PrebootAppData[];

                                                                          property listeners

                                                                          listeners?: PrebootEventListener[];

                                                                            property opts

                                                                            opts?: PrebootOptions;

                                                                              interface PrebootEvent

                                                                              interface PrebootEvent {}

                                                                                property event

                                                                                event: DomEvent;

                                                                                  property name

                                                                                  name: string;

                                                                                    property node

                                                                                    node: any;

                                                                                      property nodeKey

                                                                                      nodeKey?: any;

                                                                                        interface PrebootEventListener

                                                                                        interface PrebootEventListener {}

                                                                                          property eventName

                                                                                          eventName: string;

                                                                                            property handler

                                                                                            handler: EventListener;

                                                                                              property node

                                                                                              node: Node;

                                                                                                interface PrebootOptions

                                                                                                interface PrebootOptions {}

                                                                                                  property appRoot

                                                                                                  appRoot: string | string[];

                                                                                                    property buffer

                                                                                                    buffer?: boolean;
                                                                                                    • Deprecated

                                                                                                      minification has been removed in v6

                                                                                                    property disableOverlay

                                                                                                    disableOverlay?: boolean;

                                                                                                      property eventSelectors

                                                                                                      eventSelectors?: EventSelector[];

                                                                                                        property replay

                                                                                                        replay?: boolean;

                                                                                                          interface PrebootSelection

                                                                                                          interface PrebootSelection {}

                                                                                                            property direction

                                                                                                            direction: PrebootSelectionDirection;

                                                                                                              property end

                                                                                                              end: number;

                                                                                                                property start

                                                                                                                start: number;

                                                                                                                  interface PrebootWindow

                                                                                                                  interface PrebootWindow {}

                                                                                                                    property document

                                                                                                                    document: Document;

                                                                                                                      property getComputedStyle

                                                                                                                      getComputedStyle: (elt: Element, pseudoElt?: string) => CSSStyleDeclaration;

                                                                                                                        property prebootData

                                                                                                                        prebootData: PrebootData;

                                                                                                                          interface ServerClientRoot

                                                                                                                          interface ServerClientRoot {}

                                                                                                                            property clientNode

                                                                                                                            clientNode?: HTMLElement;

                                                                                                                              property overlay

                                                                                                                              overlay?: HTMLElement;

                                                                                                                                property serverNode

                                                                                                                                serverNode?: HTMLElement;

                                                                                                                                  Type Aliases

                                                                                                                                  type PrebootSelectionDirection

                                                                                                                                  type PrebootSelectionDirection = 'forward' | 'backward' | 'none';

                                                                                                                                    Package Files (9)

                                                                                                                                    Dependencies (1)

                                                                                                                                    Dev Dependencies (0)

                                                                                                                                    No dev dependencies.

                                                                                                                                    Peer Dependencies (2)


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

                                                                                                                                    You may also use to create a custom badge linking to

                                                                                                                                    • Markdown
                                                                                                                                    • HTML
                                                                                                                                      <a href=""><img src="" alt=""></a>