Class: ScriptManager#

A manager to ease resolution, downloading and executing additional code from:

• arbitrary JavaScript scripts
• Webpack chunks
• Webpack bundles
• Webpack MF containers

ScriptManager is globally available under ScriptManager.shared in main bundle, chunks and containers.

Use ScriptManager.shared instead of creating new instance of ScriptManager.

This API is mainly useful, if you are working with any form of Code Splitting.

ScriptManager is also an EventEmitter and emits the following events:

• resolving with { scriptId, caller }
• resolved with scriptId: string, caller?: string, locator: NormalizedScriptLocator, cache: boolean
• prefetching with scriptId: string, caller?: string, locator: NormalizedScriptLocator, cache: boolean
• loading with scriptId: string, caller?: string, locator: NormalizedScriptLocator, cache: boolean
• loaded with scriptId: string, caller?: string, locator: NormalizedScriptLocator, cache: boolean
• error with error: Error

Example of using this API with async Webpack chunk:

import * as React from 'react';
import { ScriptManager, Script } from '@callstack/repack/client';

ScriptManager.shared.addResolver(async (scriptId) => {
  if (__DEV__) {
    return {
      url: Script.getDevServerURL(scriptId);
      cache: false,
    };
  }

  return {
    url: Script.getRemoteURL(`http://domain.exaple/apps/${scriptId}`),
  };
});

// ScriptManager.shared.loadScript is called internally when running `import()`
const TeacherModule = React.lazy(() => import('./Teacher.js'));
const StudentModule = React.lazy(() => import('./Student.js'));

export function App({ role }) {
  if (role === 'teacher') {
    return <TeacherModule />;
  }

  return <StudentModule />
}

Hierarchy#

• EventEmitter

  ↳ ScriptManager

Table of contents#

Constructors#

• constructor

Properties#

• cache
• cacheInitialized
• resolvers
• storage
• captureRejectionSymbol
• captureRejections
• defaultMaxListeners
• errorMonitor

Accessors#

• shared

Methods#

• __destroy
• addListener
• addResolver
• emit
• eventNames
• getMaxListeners
• handleError
• initCache
• invalidateScripts
• listenerCount
• listeners
• loadScript
• off
• on
• once
• prefetchScript
• prependListener
• prependOnceListener
• rawListeners
• removeAllListeners
• removeAllResolvers
• removeListener
• removeResolver
• resolveScript
• saveCache
• setMaxListeners
• setStorage
• listenerCount
• on
• once

Constructors#

constructor#

• Protected new ScriptManager(nativeScriptManager?)

Constructs instance of ScriptManager.

Should not be called directly - use ScriptManager.shared.

internal

Parameters#

Overrides#

EventEmitter.constructor

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:103

Properties#

cache#

• Protected cache: Cache = {}

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:91

cacheInitialized#

• Protected cacheInitialized: boolean = false

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:92

resolvers#

• Protected resolvers: [number, ScriptLocatorResolver][] = []

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:93

storage#

• Protected Optional storage: StorageApi

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:94

captureRejectionSymbol#

▪ Static Readonly captureRejectionSymbol: typeof captureRejectionSymbol

Inherited from#

EventEmitter.captureRejectionSymbol

Defined in#

node_modules/@types/node/events.d.ts:38

captureRejections#

▪ Static captureRejections: boolean

Sets or gets the default captureRejection value for all emitters.

Inherited from#

EventEmitter.captureRejections

Defined in#

node_modules/@types/node/events.d.ts:44

defaultMaxListeners#

▪ Static defaultMaxListeners: number

Inherited from#

EventEmitter.defaultMaxListeners

Defined in#

node_modules/@types/node/events.d.ts:45

errorMonitor#

▪ Static Readonly errorMonitor: typeof errorMonitor

This symbol shall be used to install a listener for only monitoring 'error' events. Listeners installed using this symbol are called before the regular 'error' listeners are called.

Installing a listener using this symbol does not change the behavior once an 'error' event is emitted, therefore the process will still crash if no regular 'error' listener is installed.

Inherited from#

EventEmitter.errorMonitor

Defined in#

node_modules/@types/node/events.d.ts:37

Accessors#

shared#

• Static get shared(): ScriptManager

Returns#

ScriptManager

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:84

Methods#

__destroy#

▸ __destroy(): void

Returns#

void

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:138

addListener#

▸ addListener(event, listener): ScriptManager

Parameters#

Returns#

ScriptManager

Inherited from#

EventEmitter.addListener

Defined in#

node_modules/@types/node/events.d.ts:57

addResolver#

▸ addResolver(resolver, options?): void

Adds new script locator resolver.

Resolver is an async function to resolve script locator data - in other words, it's a function to tell the ScriptManager how to fetch the script.

There's no limitation on what logic you can run inside this function - it can include:

• fetching/loading remote config
• fetching/loading feature flags
• fetching/loading A/B testing data
• calling native modules
• running arbitrary logic

Parameters#

Returns#

void

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:174

emit#

▸ emit(event, ...args): boolean

Parameters#

Returns#

boolean

Inherited from#

EventEmitter.emit

Defined in#

node_modules/@types/node/events.d.ts:67

eventNames#

▸ eventNames(): (string | symbol)[]

Returns#

(string | symbol)[]

Inherited from#

EventEmitter.eventNames

Defined in#

node_modules/@types/node/events.d.ts:72

getMaxListeners#

▸ getMaxListeners(): number

Returns#

number

Inherited from#

EventEmitter.getMaxListeners

Defined in#

node_modules/@types/node/events.d.ts:64

handleError#

▸ Protected handleError(error, message, ...args): never

Parameters#

Returns#

never

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:220

initCache#

▸ Protected initCache(): Promise<void>

Returns#

Promise<void>

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:206

invalidateScripts#

▸ invalidateScripts(scriptIds?): Promise<void>

Clears the cache (if configured in ScriptManager.setStorage) and removes downloaded files for given scripts from the filesystem. This function can be awaited to detect if the scripts were invalidated and for error handling.

Use ScriptManager.shared.on('invalidated', (scriptIds) => { }) to listen for when the invalidation completes.

Parameters#

Returns#

Promise<void>

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:410

listenerCount#

▸ listenerCount(event): number

Parameters#

Returns#

number

Inherited from#

EventEmitter.listenerCount

Defined in#

node_modules/@types/node/events.d.ts:68

listeners#

▸ listeners(event): Function[]

Parameters#

Returns#

Function[]

Inherited from#

EventEmitter.listeners

Defined in#

node_modules/@types/node/events.d.ts:65

loadScript#

▸ loadScript(scriptId, caller?, webpackContext?): Promise<void>

Resolves given script's location, downloads and executes it. The execution of the code is handled internally by threading in React Native.

Use ScriptManager.shared.on('loading', (script) => { }) to listen for when the script is about to be loaded.

Use ScriptManager.shared.on('loaded', (script) => { }) to listen for when the script is loaded.

Parameters#

Returns#

Promise<void>

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:333

off#

▸ off(event, listener): ScriptManager

Parameters#

Returns#

ScriptManager

Inherited from#

EventEmitter.off

Defined in#

node_modules/@types/node/events.d.ts:61

on#

▸ on(event, listener): ScriptManager

Parameters#

Returns#

ScriptManager

Inherited from#

EventEmitter.on

Defined in#

node_modules/@types/node/events.d.ts:58

once#

▸ once(event, listener): ScriptManager

Parameters#

Returns#

ScriptManager

Inherited from#

EventEmitter.once

Defined in#

node_modules/@types/node/events.d.ts:59

prefetchScript#

▸ prefetchScript(scriptId, caller?, webpackContext?): Promise<void>

Resolves given script's location and downloads it without executing. This function can be awaited to detect if the script was downloaded and for error handling.

Use ScriptManager.shared.on('prefetching', (script) => { }) to listen for when the script's prefetch beings.

Parameters#

Returns#

Promise<void>

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:379

prependListener#

▸ prependListener(event, listener): ScriptManager

Parameters#

Returns#

ScriptManager

Inherited from#

EventEmitter.prependListener

Defined in#

node_modules/@types/node/events.d.ts:70

prependOnceListener#

▸ prependOnceListener(event, listener): ScriptManager

Parameters#

Returns#

ScriptManager

Inherited from#

EventEmitter.prependOnceListener

Defined in#

node_modules/@types/node/events.d.ts:71

rawListeners#

▸ rawListeners(event): Function[]

Parameters#

Returns#

Function[]

Inherited from#

EventEmitter.rawListeners

Defined in#

node_modules/@types/node/events.d.ts:66

removeAllListeners#

▸ removeAllListeners(event?): ScriptManager

Parameters#

Returns#

ScriptManager

Inherited from#

EventEmitter.removeAllListeners

Defined in#

node_modules/@types/node/events.d.ts:62

removeAllResolvers#

▸ removeAllResolvers(): void

Removes all previously added resolvers.

Returns#

void

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:202

removeListener#

▸ removeListener(event, listener): ScriptManager

Parameters#

Returns#

ScriptManager

Inherited from#

EventEmitter.removeListener

Defined in#

node_modules/@types/node/events.d.ts:60

removeResolver#

▸ removeResolver(resolver): boolean

Removes previously added resolver.

Parameters#

Returns#

boolean

true if resolver was found and removed, false otherwise.

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:189

resolveScript#

▸ resolveScript(scriptId, caller?, webpackContext?): Promise<Script>

Resolves a Script instance with normalized locator data.

Resolution will use previously added (via ScriptManager.shared.addResolver(...)) resolvers in series, util one returns a locator data or will throw if no resolver handled the request.

Use ScriptManager.shared.on('resolving', ({ scriptId, caller }) => { }) to listen for when the script resolution begins.

Use ScriptManager.shared.on('resolved', (script) => { }) to listen for when the script's locator data is resolved.

Parameters#

Returns#

Promise<Script>

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:241

saveCache#

▸ Protected saveCache(): Promise<void>

Returns#

Promise<void>

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:216

setMaxListeners#

▸ setMaxListeners(n): ScriptManager

Parameters#

Returns#

ScriptManager

Inherited from#

EventEmitter.setMaxListeners

Defined in#

node_modules/@types/node/events.d.ts:63

setStorage#

▸ setStorage(storage?): void

Sets a storage backend to cache resolved scripts locator data.

The stored data is used to detect if scripts locator data of previously downloaded script hasn't changed to avoid over-fetching the script.

Parameters#

Returns#

void

Defined in#

packages/repack/src/modules/ScriptManager/ScriptManager.ts:154

listenerCount#

▸ Static listenerCount(emitter, event): number

deprecated since v4.0.0

Parameters#

Returns#

number

Inherited from#

EventEmitter.listenerCount

Defined in#

node_modules/@types/node/events.d.ts:26

on#

▸ Static on(emitter, event): AsyncIterableIterator<any>

Parameters#

Returns#

AsyncIterableIterator<any>

Inherited from#

EventEmitter.on

Defined in#

node_modules/@types/node/events.d.ts:23

once#

▸ Static once(emitter, event): Promise<any[]>

Parameters#

Returns#

Promise<any[]>

Inherited from#

EventEmitter.once

Defined in#

node_modules/@types/node/events.d.ts:21

▸ Static once(emitter, event): Promise<any[]>

Parameters#

Returns#

Promise<any[]>

Inherited from#

EventEmitter.once

Defined in#

node_modules/@types/node/events.d.ts:22