Sandpack client
This is a small foundation package that sits on top of the bundler. It is framework agnostic and facilitates the handshake between your context and the bundler iframe.
import { SandpackClient } from "@codesandbox/sandpack-client";
const client = new SandpackClient("#preview", {
files: {
"/index.js": {
code: `console.log(require('uuid'))`,
},
},
entry: "/index.js",
dependencies: {
uuid: "latest",
},
});
Enumerations
Classes
Interfaces
- BaseProtocolMessage
- BaseSandpackMessage
- BundlerState
- ClientOptions
- ErrorStackFrame
- Module
- ModuleSource
- NpmRegistry
- ProtocolErrorMessage
- ProtocolRequestMessage
- ProtocolResultMessage
- SandboxInfo
- SandpackBundlerFile
- SandpackError
- SandpackErrorMessage
- Test
- TranspiledModule
Type aliases
ClientStatus
Ƭ ClientStatus: "initializing"
| "installing-dependencies"
| "transpiling"
| "evaluating"
| "running-tests"
| "idle"
Defined in
types.ts:83
Dependencies
Ƭ Dependencies: Record
<string
, string
>
Defined in
types.ts:25
Dispatch
Ƭ Dispatch: (msg
: SandpackMessage
, clientId?
: string
) => void
Type declaration
▸ (msg
, clientId?
): void
Parameters
Name | Type |
---|---|
msg | SandpackMessage |
clientId? | string |
Returns
void
Defined in
types.ts:98
Listen
Ƭ Listen: (listener
: ListenerFunction
, clientId?
: string
) => UnsubscribeFunction
Type declaration
▸ (listener
, clientId?
): UnsubscribeFunction
Parameters
Name | Type |
---|---|
listener | ListenerFunction |
clientId? | string |
Returns
Defined in
types.ts:94
ListenerFunction
Ƭ ListenerFunction: (msg
: SandpackMessage
) => void
Type declaration
▸ (msg
): void
Parameters
Name | Type |
---|---|
msg | SandpackMessage |
Returns
void
Defined in
types.ts:91
Modules
Ƭ Modules: Record
<string
, { code
: string
; path
: string
}>
Defined in
types.ts:17
ReactDevToolsMode
Ƭ ReactDevToolsMode: "latest"
| "legacy"
Defined in
types.ts:27
SandboxTestMessage
Ƭ SandboxTestMessage: RunAllTests
| RunTests
| ClearJestErrors
| { type
: "test"
} & InitializedTestsMessage
| TestCountMessage
| TotalTestStartMessage
| TotalTestEndMessage
| AddFileMessage
| RemoveFileMessage
| FileErrorMessage
| DescribeStartMessage
| DescribeEndMessage
| AddTestMessage
| TestStartMessage
| TestEndMessage
Defined in
types.ts:198
SandpackBundlerFiles
Ƭ SandpackBundlerFiles: Record
<string
, SandpackBundlerFile
>
Defined in
types.ts:10
SandpackMessage
Ƭ SandpackMessage: BaseSandpackMessage
& { type
: "initialized"
} | { firstLoad?
: boolean
; type
: "start"
} | { status
: ClientStatus
; type
: "status"
} | { state
: BundlerState
; type
: "state"
} | { type
: "success"
} | { action
: "show-error"
; type
: "action"
} & SandpackErrorMessage
| { action
: "notification"
; notificationType
: "error"
; title
: string
; type
: "action"
} | { compilatonError
: boolean
; type
: "done"
} | { back
: boolean
; forward
: boolean
; type
: "urlchange"
; url
: string
} | { height
: number
; type
: "resize"
} | { data
: Record
<string
, Record
<string
, unknown
>> ; type
: "transpiler-context"
} | { clearConsoleDisabled?
: boolean
; customNpmRegistries?
: NpmRegistry
[] ; disableDependencyPreprocessing?
: boolean
; externalResources
: string
[] ; hasFileResolver
: boolean
; isInitializationCompile?
: boolean
; logLevel?
: SandpackLogLevel
; modules
: Modules
; reactDevTools?
: ReactDevToolsMode
; showErrorScreen
: boolean
; showLoadingScreen
: boolean
; showOpenInCodeSandbox
: boolean
; skipEval
: boolean
; template?
: string
| ITemplate
; type
: "compile"
; version
: number
} | { type
: "refresh"
} | { type
: "urlback"
} | { type
: "urlforward"
} | { type
: "get-transpiler-context"
} | { type
: "activate-react-devtools"
} | { log
: { data
: string
[] ; id
: string
; method
: SandpackMessageConsoleMethods
}[] ; type
: "console"
} | SandboxTestMessage
Defined in
types.ts:291
SandpackMessageConsoleMethods
Ƭ SandpackMessageConsoleMethods: "log"
| "debug"
| "info"
| "warn"
| "error"
| "table"
| "clear"
| "time"
| "timeEnd"
| "count"
| "assert"
Defined in
types.ts:119
Template
Ƭ Template: "angular-cli"
| "create-react-app"
| "create-react-app-typescript"
| "svelte"
| "parcel"
| "vue-cli"
| "static"
| "solid"
Defined in
types.ts:383
TestError
Ƭ TestError: Error
& { mappedErrors?
: { _originalColumnNumber
: number
; _originalFunctionName
: string
; _originalLineNumber
: number
; _originalScriptCode
: { content
: string
; highlight
: boolean
; lineNumber
: number
}[] | null
; fileName
: string
}[] ; matcherResult?
: boolean
}
Defined in
types.ts:174
UnsubscribeFunction
Ƭ UnsubscribeFunction: () => void
Type declaration
▸ (): void
Returns
void
Defined in
types.ts:92
Functions
addPackageJSONIfNeeded
▸ addPackageJSONIfNeeded(files
, dependencies?
, devDependencies?
, entry?
): SandpackBundlerFiles
Parameters
Name | Type |
---|---|
files | SandpackBundlerFiles |
dependencies? | Dependencies |
devDependencies? | Dependencies |
entry? | string |
Returns
Defined in
utils.ts:29
createPackageJSON
▸ createPackageJSON(dependencies?
, devDependencies?
, entry?
): string
Parameters
Name | Type | Default value |
---|---|---|
dependencies | Dependencies | {} |
devDependencies | Dependencies | {} |
entry | string | "/index.js" |
Returns
string
Defined in
utils.ts:12
extractErrorDetails
▸ extractErrorDetails(msg
): SandpackError
Parameters
Name | Type |
---|---|
msg | SandpackErrorMessage |
Returns
Defined in
utils.ts:89
normalizePath
▸ normalizePath<R
>(path
): R
Type parameters
Name | Type |
---|---|
R | extends unknown |
Parameters
Name | Type |
---|---|
path | R |
Returns
R
Defined in
utils.ts:183