preboot
- Version 8.0.0
- Published
- 450 kB
- 1 dependency
- MIT license
Install
npm i preboot
yarn add preboot
pnpm add preboot
Overview
Record server view events and play back to Angular client view
Index
Variables
Functions
Classes
Interfaces
Type Aliases
Variables
variable defaultOptions
const defaultOptions: PrebootOptions;
variable initFunctionName
const initFunctionName: string;
variable ɵa
const ɵa: InjectionToken<PrebootOptions>;
variable ɵc
const ɵc: { provide: InjectionToken<() => void>; useFactory: typeof PREBOOT_FACTORY; deps: ( | typeof EventReplayer | InjectionToken<PrebootOptions> | Optional[] | typeof ApplicationRef )[]; multi: boolean;};
variable PREBOOT_NONCE
const PREBOOT_NONCE: InjectionToken<string>;
Functions
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
Returns
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
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)
Returns
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
Returns
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
Returns
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.
Returns
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: ApplicationRef, 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
Returns
The stringified version of an object
function validateOptions
validateOptions: (opts: PrebootOptions) => void;
Throw an error if issues with any options
Parameter opts
Classes
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) => ModuleWithProviders<PrebootModule>;
Interfaces
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 https://angular.io/license
interface NodeContext
interface NodeContext {}
interface PrebootAppData
interface PrebootAppData {}
interface PrebootData
interface PrebootData {}
property activeNode
activeNode?: NodeContext;
property apps
apps?: PrebootAppData[];
property listeners
listeners?: PrebootEventListener[];
property opts
opts?: PrebootOptions;
interface PrebootEvent
interface PrebootEvent {}
interface PrebootEventListener
interface PrebootEventListener {}
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 {}
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)
Badge
To add a badge like this oneto 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/preboot
.
- Markdown[](https://www.jsdocs.io/package/preboot)
- HTML<a href="https://www.jsdocs.io/package/preboot"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 3008 ms. - Missing or incorrect documentation? Open an issue for this package.