import * as vue from 'vue'; import { Plugin, HTMLAttributes, Ref, DefineComponent, PropType, InjectionKey, VNode, UnwrapRef, UnwrapNestedRefs } from 'vue'; import { SandpackLogLevel, NpmRegistry, SandpackMessage, ListenerFunction, UnsubscribeFunction, BundlerState, SandpackError, SandpackBundlerFiles, SandpackClient, ReactDevToolsMode, SandpackMessageConsoleMethods, TestError } from '@codesandbox/sandpack-client'; import { LanguageSupport } from '@codemirror/language'; import { CSSProperties } from '@stitches/core'; import * as _codemirror_state from '@codemirror/state'; import { Extension } from '@codemirror/state'; import * as _codemirror_view from '@codemirror/view'; import { EditorView, KeyBinding } from '@codemirror/view'; import * as _stitches_core_types_styled_component from '@stitches/core/types/styled-component'; declare function SanpackPlugin(): Plugin; declare const VITE_TEMPLATE: { files: { '/index.js': { code: string; }; '/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; declare const VITE_REACT_TEMPLATE: { files: { '/App.jsx': { code: string; }; '/index.jsx': { code: string; }; '/index.html': { code: string; }; '/package.json': { code: string; }; '/vite.config.js': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; declare const VITE_REACT_TS_TEMPLATE: { files: { '/App.tsx': { code: string; }; '/index.tsx': { code: string; }; '/index.html': { code: string; }; '/tsconfig.json': { code: string; }; '/tsconfig.node.json': { code: string; }; '/package.json': { code: string; }; '/vite-env.d.ts': { code: string; }; '/vite.config.ts': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; declare const VITE_PREACT_TEMPLATE: { files: { '/App.jsx': { code: string; }; '/index.jsx': { code: string; }; '/index.html': { code: string; }; '/package.json': { code: string; }; '/vite.config.js': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; declare const VITE_PREACT_TS_TEMPLATE: { files: { '/App.tsx': { code: string; }; '/index.tsx': { code: string; }; '/index.html': { code: string; }; '/tsconfig.json': { code: string; }; '/tsconfig.node.json': { code: string; }; '/package.json': { code: string; }; '/vite-env.d.ts': { code: string; }; '/vite.config.ts': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; declare const VITE_SVELTE_TEMPLATE: { files: { '/src/styles.css': { code: string; }; '/src/App.svelte': { code: string; }; '/src/main.js': { code: string; }; '/index.html': { code: string; }; 'svelte.config.js': { code: string; }; '/vite.config.js': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; declare const VITE_SVELTE_TS_TEMPLATE: { files: { '/src/styles.css': { code: string; }; '/src/App.svelte': { code: string; }; '/src/main.ts': { code: string; }; '/index.html': { code: string; }; '/vite-env.d.ts': { code: string; }; 'svelte.config.js': { code: string; }; '/vite.config.ts': { code: string; }; 'tsconfig.json': { code: string; }; 'tsconfig.node.json': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; declare const VITE_VUE_TEMPLATE: { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.js': { code: string; }; '/index.html': { code: string; }; '/vite.config.js': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; declare const VITE_VUE_TS_TEMPLATE: { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.ts': { code: string; }; '/index.html': { code: string; }; '/vite-env.d.ts': { code: string; }; '/vite.config.ts': { code: string; }; 'tsconfig.json': { code: string; }; 'tsconfig.node.json': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; declare const ANGULAR_TEMPLATE: { files: { '/src/app/app.component.css': { code: string; }; '/src/app/app.component.html': { code: string; }; '/src/app/app.component.ts': { code: string; }; '/src/app/app.module.ts': { code: string; }; '/src/index.html': { code: string; }; '/src/main.ts': { code: string; }; '/src/polyfills.ts': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; declare const REACT_TEMPLATE: { files: { '/App.js': { code: string; }; '/index.js': { code: string; }; '/public/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; declare const REACT_TYPESCRIPT_TEMPLATE: { files: { 'tsconfig.json': { code: string; }; '/App.tsx': { code: string; }; '/index.tsx': { code: string; }; '/public/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; declare const SOLID_TEMPLATE: { files: { '/App.tsx': { code: string; }; '/index.tsx': { code: string; }; '/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; declare const SVELTE_TEMPLATE: { files: { '/App.svelte': { code: string; }; '/index.js': { code: string; }; '/public/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; declare const TEST_TYPESCRIPT_TEMPLATE: { files: { 'tsconfig.json': { code: string; }; '/add.ts': { code: string; }; '/add.test.ts': { code: string; }; 'package.json': { code: string; }; }; main: string; environment: string; mode: string; }; declare const VANILLA_TEMPLATE: { files: { '/index.js': { code: string; }; '/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; declare const VANILLA_TYPESCRIPT_TEMPLATE: { files: { 'tsconfig.json': { code: string; }; '/index.ts': { code: string; }; '/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; declare const VUE_TEMPLATE: { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.js': { code: string; }; '/public/index.html': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; declare const VUE_TS_TEMPLATE: { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.ts': { code: string; }; '/src/shims-vue.d.ts': string; '/public/index.html': { code: string; }; '/package.json': { code: string; }; '/tsconfig.json': { code: string; }; }; main: string; environment: string; }; /** * @hidden */ declare const VUE2_TEMPLATE: { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.js': { code: string; }; '/public/index.html': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; /** * @hidden */ declare const VUE2_TS_TEMPLATE: { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.ts': { code: string; }; '/public/index.html': { code: string; }; '/src/shims-vue.d.ts': string; '/package.json': { code: string; }; '/tsconfig.json': { code: string; }; }; main: string; environment: string; }; declare const SANDBOX_TEMPLATES: { react: { files: { '/App.js': { code: string; }; '/index.js': { code: string; }; '/public/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; 'react-ts': { files: { 'tsconfig.json': { code: string; }; '/App.tsx': { code: string; }; '/index.tsx': { code: string; }; '/public/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; vue2: { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.js': { code: string; }; '/public/index.html': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; 'vue2-ts': { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.ts': { code: string; }; '/public/index.html': { code: string; }; '/src/shims-vue.d.ts': string; '/package.json': { code: string; }; '/tsconfig.json': { code: string; }; }; main: string; environment: string; }; vue: { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.js': { code: string; }; '/public/index.html': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; 'vue-ts': { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.ts': { code: string; }; '/src/shims-vue.d.ts': string; '/public/index.html': { code: string; }; '/package.json': { code: string; }; '/tsconfig.json': { code: string; }; }; main: string; environment: string; }; vue3: { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.js': { code: string; }; '/public/index.html': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; 'vue3-ts': { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.ts': { code: string; }; '/src/shims-vue.d.ts': string; '/public/index.html': { code: string; }; '/package.json': { code: string; }; '/tsconfig.json': { code: string; }; }; main: string; environment: string; }; vanilla: { files: { '/index.js': { code: string; }; '/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; 'vanilla-ts': { files: { 'tsconfig.json': { code: string; }; '/index.ts': { code: string; }; '/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; static: { files: { '/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; angular: { files: { '/src/app/app.component.css': { code: string; }; '/src/app/app.component.html': { code: string; }; '/src/app/app.component.ts': { code: string; }; '/src/app/app.module.ts': { code: string; }; '/src/index.html': { code: string; }; '/src/main.ts': { code: string; }; '/src/polyfills.ts': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; svelte: { files: { '/App.svelte': { code: string; }; '/index.js': { code: string; }; '/public/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; solid: { files: { '/App.tsx': { code: string; }; '/index.tsx': { code: string; }; '/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; 'test-ts': { files: { 'tsconfig.json': { code: string; }; '/add.ts': { code: string; }; '/add.test.ts': { code: string; }; 'package.json': { code: string; }; }; main: string; environment: string; mode: string; }; node: { files: { '/index.js': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; nextjs: { files: { '/pages/_app.js': { code: string; }; '/pages/index.js': { code: string; }; '/next.config.js': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; vite: { files: { '/index.js': { code: string; }; '/index.html': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; 'vite-react': { files: { '/App.jsx': { code: string; }; '/index.jsx': { code: string; }; '/index.html': { code: string; }; '/package.json': { code: string; }; '/vite.config.js': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; 'vite-react-ts': { files: { '/App.tsx': { code: string; }; '/index.tsx': { code: string; }; '/index.html': { code: string; }; '/tsconfig.json': { code: string; }; '/tsconfig.node.json': { code: string; }; '/package.json': { code: string; }; '/vite-env.d.ts': { code: string; }; '/vite.config.ts': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; 'vite-preact': { files: { '/App.jsx': { code: string; }; '/index.jsx': { code: string; }; '/index.html': { code: string; }; '/package.json': { code: string; }; '/vite.config.js': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; 'vite-preact-ts': { files: { '/App.tsx': { code: string; }; '/index.tsx': { code: string; }; '/index.html': { code: string; }; '/tsconfig.json': { code: string; }; '/tsconfig.node.json': { code: string; }; '/package.json': { code: string; }; '/vite-env.d.ts': { code: string; }; '/vite.config.ts': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; 'vite-vue': { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.js': { code: string; }; '/index.html': { code: string; }; '/vite.config.js': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; 'vite-vue-ts': { files: { '/src/styles.css': { code: string; }; '/src/App.vue': { code: string; }; '/src/main.ts': { code: string; }; '/index.html': { code: string; }; '/vite-env.d.ts': { code: string; }; '/vite.config.ts': { code: string; }; 'tsconfig.json': { code: string; }; 'tsconfig.node.json': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; 'vite-svelte': { files: { '/src/styles.css': { code: string; }; '/src/App.svelte': { code: string; }; '/src/main.js': { code: string; }; '/index.html': { code: string; }; 'svelte.config.js': { code: string; }; '/vite.config.js': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; 'vite-svelte-ts': { files: { '/src/styles.css': { code: string; }; '/src/App.svelte': { code: string; }; '/src/main.ts': { code: string; }; '/index.html': { code: string; }; '/vite-env.d.ts': { code: string; }; 'svelte.config.js': { code: string; }; '/vite.config.ts': { code: string; }; 'tsconfig.json': { code: string; }; 'tsconfig.node.json': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; 'vite-solid': { files: { '/App.tsx': { code: string; }; '/index.tsx': { code: string; }; '/index.html': { code: string; }; '/vite.config.ts': { code: string; }; '/tsconfig.json': { code: string; }; '/package.json': { code: string; }; '/styles.css': { code: string; }; }; main: string; environment: string; }; 'vite-lit': { files: { '/styles.css': { code: string; }; '/index.html': { code: string; }; '/main.ts': { code: string; }; '/vite-env.d.ts': { code: string; }; '/tsconfig.json': { code: string; }; '/tsconfig.node.json': { code: string; }; '/vite.config.ts': { code: string; }; '/package.json': { code: string; }; }; entry: string; main: string; environment: string; }; astro: { files: { '/src/styles.css': { code: string; }; '/src/pages/index.astro': { code: string; }; '/src/env.d.ts': { code: string; }; '.env': { code: string; }; '/astro.config.mjs': { code: string; }; '/tsconfig.json': { code: string; }; '/package.json': { code: string; }; }; main: string; environment: string; }; }; /** * ------------------------ Public documentation ------------------------ * * From this section on, all types are artificially created and maintained * for public documentation purposes. So, this might not reflect precisely * the component behavior, but it still needs to be reliable and clear for * general usage. */ interface SandpackProps { /** * It accepts an object, where each key is the relative * path of that file in the sandbox folder structure. Files passed in * through the files prop override those in the template structure. * * Since each template uses the same type to define the files, you can * overwrite the contents of any of the template files. * * Example: * ```js * { * "/App.js": "export default () => 'foo'" * } * ``` */ files?: SandpackFiles; /** * Set of presets to easily initialize sandboxes. Each template contains * its files, environment and dependencies, and you can overwrite it * using `customSetup` or `dependencies`. */ template?: SandpackPredefinedTemplate; /** * Pass custom properties to set your own Sandpack environment. * * Since each template uses the same type to define the files, you can * overwrite the contents of any of the template files. */ customSetup?: SandpackSetup; /** * The theme specifies the color set of the components, syntax highlight, * and typography. Use this prop in order to match the design aspect of your website. * * Set as `auto` to turn it color scheme sensitive */ theme?: SandpackThemeProp; /** * Pass custom properties to customize the interface and the behavior * of the sandbox, such as initialization mode, recompile mode, files resolver, etc. */ options?: SandpackOptions; /** * CodeSandbox team id: with this information, bundler can connect to CodeSandbox * and unlock a few capabilities, like private dependencies. */ teamId?: string; } /** * @category Setup */ interface SandpackOptions { /** * List of files that will be visible for the user interacts with. * It defaults to the main file from a given template. */ visibleFiles?: string[]; /** * Use this to set a file as active by default in the editor component. * It defaults to the main file from a given template. */ activeFile?: string; editorWidthPercentage?: number; editorHeight?: CSSProperties['height']; classes?: Record; rtl?: boolean; showNavigator?: boolean; showLineNumbers?: boolean; showInlineErrors?: boolean; showRefreshButton?: boolean; showTabs?: boolean; showConsoleButton?: boolean; showConsole?: boolean; closableTabs?: boolean; wrapContent?: boolean; /** * @default true */ resizablePanels?: boolean; codeEditor?: SandpackCodeOptions; /** * This disables editing of content by the user in all files. */ readOnly?: boolean; /** * Controls the visibility of Read-only label, which will only * appears when `readOnly` is `true` */ showReadOnly?: boolean; layout?: 'preview' | 'tests' | 'console'; /** * This provides a way to control how some components are going to * be initialized on the page. The CodeEditor and the Preview components * are quite expensive and might overload the memory usage, so this gives * a certain control of when to initialize them. */ initMode?: SandpackInitMode; initModeObserverOptions?: IntersectionObserverInit; /** * Determines whether or not the bundling process should start automatically * for a component in Sandpack. By default, when the component gets closer * to the viewport or when the page loads and the component is already in * the viewport, the bundling process will start automatically. However, * if this prop is set to false, the bundling process will only start when * triggered manually by the user. */ autorun?: boolean; /** * Determines whether or not the component should automatically reload when * changes are made to the code. When this prop is set to true, any changes * made to the code will trigger an automatic reload of the component, * allowing the user to see the changes immediately. However, if this prop * is set to false, the component will need to be manually reloaded by the * user to see the changes. */ autoReload?: boolean; recompileMode?: 'immediate' | 'delayed'; recompileDelay?: number; /** * By default, Sandpack generates a random value to use as an id. * Use this to override this value if you need predictable values. */ id?: string; logLevel?: SandpackLogLevel; bundlerURL?: string; startRoute?: string; skipEval?: boolean; fileResolver?: FileResolver; externalResources?: string[]; } /** * @category Setup */ interface SandpackSetup { /** * Any template will include the needed dependencies, * but you can specify any additional dependencies. The key * should be the name of the package, while the value is the version, * in exactly the same format as it would be inside package.json. * * Examples: * ```js * { * "react": "latest", * "@material-ui/core": "4.12.3", * } * ``` */ dependencies?: Record; /** * Sandpack doesn't install devDependencies, because most tools in there * were build tools, which is not necessary to properly run a sandbox, * but maybe required for running locally or export to CodeSandbox. * * Examples: * ```js * { * "@types/react": "latest", * } * ``` */ devDependencies?: Record; /** * The entry file is the starting point of the bundle process. * * If you change the path of the entry file, make sure you control * all the files that go into the bundle process, as prexisting * settings in the template might not work anymore. */ entry?: string; /** * Each sandbox has its own bundler attached to them which are configured * to support a specific framework and emulate their official CLI tools. * They are not one-to-one implementations and thus do not support advanced * configuration like custom webpack configurations or ejecting. However, * they are designed to mirror the default behavior of the framework */ environment?: SandboxEnvironment; /** * The custom private npm registry setting makes it possible * to retrieve npm packages from your own npm registry. * * Examples: * ```js * { * enabledScopes: ["@codesandbox"], * registryUrl: "//my-registry.domain.com", * limitToScopes: true, // if false all packages will be fetched from custom registry * registryAuthToken: "SECRET" // optinal value, if public * } * ``` */ npmRegistries?: NpmRegistry[]; } /** * @category Setup */ type SandboxEnvironment = 'angular-cli' | 'create-react-app' | 'create-react-app-typescript' | 'svelte' | 'parcel' | 'vue-cli' | 'static' | 'solid' | 'node'; /** * @category Setup */ type SandpackPredefinedTemplate = keyof typeof SANDBOX_TEMPLATES; /** * @category Setup */ interface SandpackFile { code: string; hidden?: boolean; active?: boolean; readOnly?: boolean; } /** * `immediate`: It immediately mounts all components, such as the code-editor * and the preview - this option might overload the memory usage * and resource from the browser on a page with multiple instances; * * `lazy`: Only initialize the components when the user is about to scroll * them to the viewport and keep these components mounted until the user * leaves the page - this is the default value; * * `user-visible`: Only initialize the components when the user is about * to scroll them to the viewport, but differently from lazy, this option * unmounts those components once it's no longer in the viewport. * * @category Setup */ type SandpackInitMode = 'immediate' | 'lazy' | 'user-visible'; /** * @category Setup */ interface CustomLanguage { name: string; extensions: string[]; language: LanguageSupport; } /** * @category Theme */ type SandpackPredefinedTheme = 'light' | 'dark' | 'auto'; /** * @category Theme */ interface SandpackTheme { colors: { surface1: string; surface2: string; surface3: string; disabled: string; base: string; clickable: string; hover: string; accent: string; error?: string; errorSurface?: string; warning?: string; warningSurface?: string; }; syntax: { plain: string | SandpackSyntaxStyle; comment: string | SandpackSyntaxStyle; keyword: string | SandpackSyntaxStyle; definition: string | SandpackSyntaxStyle; punctuation: string | SandpackSyntaxStyle; property: string | SandpackSyntaxStyle; tag: string | SandpackSyntaxStyle; static: string | SandpackSyntaxStyle; string?: string | SandpackSyntaxStyle; }; font: { body: string; mono: string; size: string; lineHeight: string; }; } /** * @category Theme */ interface SandpackSyntaxStyle { color?: string; fontStyle?: 'normal' | 'italic'; fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; textDecoration?: 'none' | 'underline' | 'line-through' | 'underline line-through'; } /** * @category Theme */ type SandpackThemeProp = SandpackPredefinedTheme | DeepPartial; /** * * ------------------------ Internal types --------------------------- * * From this section on, all types are hidden because most of them are * strictly related to the internal typing system, and they are not * helpful for public documentation. * * For public purpose use SandpackProps instead. */ type TemplateFiles = keyof typeof SANDBOX_TEMPLATES[Name]['files']; interface SandpackInternal { (props: SandpackInternalProps & { files?: Files; template?: TemplateName; }): JSX.Element; } interface SandpackInternalProvider { ( /** * Infer files & template values */ props: SandpackProviderProps & { files?: Files; template?: TemplateName; children?: JSX.Element; }): SandpackProviderProps & SandpackProviderState; } interface SandpackRootProps { files?: Files; template?: TemplateName; customSetup?: SandpackSetup; theme?: SandpackThemeProp; className?: string; teamId?: string; sandboxId?: string; /** * @default false */ rtl?: boolean; } interface SandpackInternalOptions { visibleFiles?: string[]; activeFile?: string; initMode?: SandpackInitMode; initModeObserverOptions?: IntersectionObserverInit; autorun?: boolean; autoReload?: boolean; recompileMode?: 'immediate' | 'delayed'; recompileDelay?: number; id?: string; logLevel?: SandpackLogLevel; bundlerURL?: string; bundlerTimeOut?: number; startRoute?: string; skipEval?: boolean; fileResolver?: FileResolver; externalResources?: string[]; classes?: Record; } interface SandpackInternalProps extends SandpackRootProps { options?: SandpackInternalOptions & { editorWidthPercentage?: number; editorHeight?: CSSProperties['height']; rtl?: boolean; showNavigator?: boolean; showLineNumbers?: boolean; showInlineErrors?: boolean; showRefreshButton?: boolean; showTabs?: boolean; showConsoleButton?: boolean; showConsole?: boolean; closableTabs?: boolean; wrapContent?: boolean; /** * @default true */ resizablePanels?: boolean; codeEditor?: SandpackCodeOptions; /** * This disables editing of content by the user in all files. */ readOnly?: boolean; /** * Controls the visibility of Read-only label, which will only * appears when `readOnly` is `true` */ showReadOnly?: boolean; layout?: 'preview' | 'tests' | 'console'; }; } interface SandpackProviderProps extends SandpackRootProps, HTMLAttributes { options?: SandpackInternalOptions; children?: JSX.Element; } /** * @hidden */ type SandpackClientDispatch = (msg: SandpackMessage, clientId?: string) => void; /** * @hidden */ type SandpackClientListen = (listener: ListenerFunction, clientId?: string) => UnsubscribeFunction; /** * @hidden */ type SandpackContext = SandpackState & { dispatch: SandpackClientDispatch; listen: SandpackClientListen; }; /** * @hidden */ interface SandpackState { bundlerState: BundlerState | undefined; /** * List the file path listed in the file tab, * which will allow the user to interact with. */ visibleFiles: string[]; /** * List the file path listed in the file tab, * * Can only be changed through the properties of sandpackprovider (files/options) */ visibleFilesFromProps: string[]; /** * Path to the file will be open in the code editor * when the component mounts */ activeFile: string; startRoute?: string; autorun?: boolean; autoReload: boolean; /** * Returns the current state of the editor, meaning that any * changes from the original `files` must return a `dirty` value; * otherwise, it'll return `pristine` */ editorState: EditorState; teamId?: string; error: SandpackError | null; files: SandpackBundlerFiles; environment?: SandboxEnvironment; status: SandpackStatus; initMode: SandpackInitMode; clients: Record>; runSandpack: () => Promise; registerBundler: (iframe: HTMLIFrameElement, clientId: string, clientPropsOverride?: ClientPropsOverride) => Promise; unregisterBundler: (clientId: string) => void; updateFile: (pathOrFiles: string | SandpackFiles, code?: string, shouldUpdatePreview?: boolean) => void; addFile: (pathOrFiles: string | SandpackFiles, code?: string, shouldUpdatePreview?: boolean) => void; updateCurrentFile: (newCode: string, shouldUpdatePreview?: boolean) => void; openFile: (path: string) => void; closeFile: (path: string) => void; deleteFile: (path: string, shouldUpdatePreview?: boolean) => void; setActiveFile: (path: string) => void; resetFile: (path: string) => void; resetAllFiles: () => void; registerReactDevTools: (value: ReactDevToolsMode) => void; /** * Element refs * Different components inside the SandpackProvider might register certain elements of interest for sandpack * eg: lazy anchor - if no component registers this, then the sandpack runs on mount, without lazy mode */ lazyAnchorRef: Ref; unsubscribeClientListenersRef: Ref>>; queuedListenersRef: Ref>>; } type SandpackStatus = 'initial' | 'idle' | 'running' | 'timeout' | 'done'; type EditorState = 'pristine' | 'dirty'; interface SandboxTemplate { files: Record; dependencies: Record; devDependencies?: Record; entry?: string; main: string; environment: SandboxEnvironment; } type SandpackFiles = Record; /** * Custom properties to be used in the SandpackCodeEditor component, * some of which are exclusive to customize the CodeMirror instance. * @hidden */ interface SandpackCodeOptions { /** * CodeMirror extensions for the editor state, which can * provide extra features and functionalities to the editor component. */ extensions?: CodeEditorProps['extensions']; /** * Property to register CodeMirror extension keymap. */ extensionsKeymap?: CodeEditorProps['extensionsKeymap']; /** * Provides a way to add custom language modes by supplying a language * type, applicable file extensions, and a LanguageSupport instance * for that syntax mode */ additionalLanguages?: CodeEditorProps['additionalLanguages']; } type DeepPartial = { [Property in keyof Type]?: DeepPartial; }; interface FileResolver { isFile: (path: string) => Promise; readFile: (path: string) => Promise; } interface SandpackProviderState { files: SandpackBundlerFiles; environment?: SandboxEnvironment; visibleFiles: Array | string>; activeFile: TemplateFiles | string; startRoute?: string; initMode: SandpackInitMode; bundlerState?: BundlerState; error: SandpackError | null; sandpackStatus: SandpackStatus; editorState: EditorState; reactDevTools?: ReactDevToolsMode; } /** * Sandpack component */ declare const Sandpack: SandpackInternal; /** * code area */ declare const CodeMirror: vue.DefineComponent<{ onCodeUpdate?: ((newCode: string) => void) | undefined; code: string; filePath?: string | undefined; fileType?: string | undefined; showLineNumbers?: boolean | undefined; showInlineErrors?: boolean | undefined; wrapContent?: boolean | undefined; editorState?: EditorState | undefined; readOnly?: boolean | undefined; showReadOnly?: boolean | undefined; decorators?: Decorators | undefined; initMode: SandpackInitMode; extensions?: _codemirror_state.Extension[] | undefined; extensionsKeymap?: _codemirror_view.KeyBinding[] | undefined; additionalLanguages?: CustomLanguage[] | undefined; }, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{ onCodeUpdate?: ((newCode: string) => void) | undefined; code: string; filePath?: string | undefined; fileType?: string | undefined; showLineNumbers?: boolean | undefined; showInlineErrors?: boolean | undefined; wrapContent?: boolean | undefined; editorState?: EditorState | undefined; readOnly?: boolean | undefined; showReadOnly?: boolean | undefined; decorators?: Decorators | undefined; initMode: SandpackInitMode; extensions?: _codemirror_state.Extension[] | undefined; extensionsKeymap?: _codemirror_view.KeyBinding[] | undefined; additionalLanguages?: CustomLanguage[] | undefined; }> & Readonly<{}>, { extensions: _codemirror_state.Extension[]; extensionsKeymap: (readonly _codemirror_view.KeyBinding[])[]; additionalLanguages: CustomLanguage[][]; editorState: EditorState; initMode: SandpackInitMode; showLineNumbers: boolean; showInlineErrors: boolean; wrapContent: boolean; readOnly: boolean; showReadOnly: boolean; decorators: Decorators; }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; type Decorators = Array<{ className?: string; line: number; startColumn?: number; endColumn?: number; elementAttributes?: Record; }>; interface CodeMirrorRef { getCodemirror: () => EditorView | undefined; } interface CodeMirrorProps { onCodeUpdate?: (newCode: string) => void; code: string; filePath?: string; fileType?: string; /** * @default false */ showLineNumbers?: boolean; /** * @default false */ showInlineErrors?: boolean; /** * @default false */ wrapContent?: boolean; /** * @default 'pristine' */ editorState?: EditorState; /** * This disables editing of content by the user in all files. * @default false */ readOnly?: boolean; /** * Controls the visibility of Read-only label, which will only * appears when `readOnly` is `true` * @default true */ showReadOnly?: boolean; /** * Provides a way to draw or style a piece of the content. */ decorators?: Decorators; /** * @default 'lazy' */ initMode: SandpackInitMode; /** * @default [] */ extensions?: Extension[]; /** * @default [] */ extensionsKeymap?: KeyBinding[]; /** * Provides a way to add custom language modes by supplying a language * type, applicable file extensions, and a LanguageSupport instance * for that syntax mode */ additionalLanguages?: CustomLanguage[]; } interface CodeEditorProps { showTabs?: boolean; showLineNumbers?: boolean; showInlineErrors?: boolean; showRunButton?: boolean; wrapContent?: boolean; closableTabs?: boolean; /** * This provides a way to control how some components are going to * be initialized on the page. The CodeEditor and the Preview components * are quite expensive and might overload the memory usage, so this gives * a certain control of when to initialize them. */ initMode?: SandpackInitMode; /** * CodeMirror extensions for the editor state, which can * provide extra features and functionalities to the editor component. */ extensions?: Extension[]; /** * Property to register CodeMirror extension keymap. */ extensionsKeymap?: KeyBinding[]; /** * This disables editing of the editor content by the user. */ readOnly?: boolean; /** * Controls the visibility of Read-only label, which will only * appears when `readOnly` is `true` */ showReadOnly?: boolean; /** * Provides a way to add custom language modes by supplying a language * type, applicable file extensions, and a LanguageSupport instance * for that syntax mode */ additionalLanguages?: CustomLanguage[]; } declare const SandpackCodeEditor: vue.DefineComponent<{ showTabs?: boolean | undefined; showLineNumbers?: boolean | undefined; showInlineErrors?: boolean | undefined; showRunButton?: boolean | undefined; wrapContent?: boolean | undefined; closableTabs?: boolean | undefined; initMode?: SandpackInitMode | undefined; extensions?: Extension[] | undefined; extensionsKeymap?: KeyBinding[] | undefined; readOnly?: boolean | undefined; showReadOnly?: boolean | undefined; additionalLanguages?: CustomLanguage[] | undefined; }, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{ showTabs?: boolean | undefined; showLineNumbers?: boolean | undefined; showInlineErrors?: boolean | undefined; showRunButton?: boolean | undefined; wrapContent?: boolean | undefined; closableTabs?: boolean | undefined; initMode?: SandpackInitMode | undefined; extensions?: Extension[] | undefined; extensionsKeymap?: KeyBinding[] | undefined; readOnly?: boolean | undefined; showReadOnly?: boolean | undefined; additionalLanguages?: CustomLanguage[] | undefined; }> & Readonly<{}>, { extensions: Extension[]; extensionsKeymap: (readonly KeyBinding[])[]; additionalLanguages: CustomLanguage[][]; initMode: SandpackInitMode; showLineNumbers: boolean; showInlineErrors: boolean; wrapContent: boolean; readOnly: boolean; showReadOnly: boolean; closableTabs: boolean; showTabs: boolean; }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; declare const tabButton: _stitches_core_types_styled_component.CssComponent; interface FileTabsProps { /** * This adds a close button next to each file with a unique trigger to close it. */ closableTabs?: boolean; } /** * FileTabs is a list of all open files, the active file, and its state. */ declare const FileTabs: DefineComponent; /** * Directory */ declare const Directory: vue.DefineComponent<{ prefixedPath: string; files: SandpackBundlerFiles; selectFile: (path: string) => void; activeFile: NonNullable; depth: number; visibleFiles?: NonNullable | undefined; autoHiddenFiles?: boolean | undefined; initialCollapsedFolder?: string[] | undefined; }, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{ prefixedPath: string; files: SandpackBundlerFiles; selectFile: (path: string) => void; activeFile: NonNullable; depth: number; visibleFiles?: NonNullable | undefined; autoHiddenFiles?: boolean | undefined; initialCollapsedFolder?: string[] | undefined; }> & Readonly<{}>, { visibleFiles: string[]; depth: number; autoHiddenFiles: boolean; initialCollapsedFolder: string[] | undefined; }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; /** * File */ declare const File: vue.DefineComponent<{ path: string; selectFile?: ((path: string) => void) | undefined; active?: boolean | undefined; onClick?: ((e: MouseEvent) => void) | undefined; depth: number; isDirOpen?: boolean | undefined; }, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{ path: string; selectFile?: ((path: string) => void) | undefined; active?: boolean | undefined; onClick?: ((e: MouseEvent) => void) | undefined; depth: number; isDirOpen?: boolean | undefined; }> & Readonly<{}>, { onClick: Function; active: boolean; selectFile: Function; isDirOpen: boolean; }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; /** * ModuleList */ declare const ModuleList: vue.DefineComponent<{ prefixedPath: string; files: SandpackBundlerFiles; selectFile: (path: string) => void; activeFile: NonNullable; visibleFiles?: NonNullable | undefined; depth?: number | undefined; autoHiddenFiles?: boolean | undefined; initialCollapsedFolder?: string[] | undefined; }, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{ prefixedPath: string; files: SandpackBundlerFiles; selectFile: (path: string) => void; activeFile: NonNullable; visibleFiles?: NonNullable | undefined; depth?: number | undefined; autoHiddenFiles?: boolean | undefined; initialCollapsedFolder?: string[] | undefined; }> & Readonly<{}>, { visibleFiles: string[]; depth: number; autoHiddenFiles: boolean; initialCollapsedFolder: string[] | undefined; }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; interface SandpackFileExplorerProp { /** * enable auto hidden file in file explorer * * @description set with hidden property in files property * @default false */ autoHiddenFiles?: boolean; initialCollapsedFolder?: string[]; } /** * SandpackFileExplorer */ declare const SandpackFileExplorer: DefineComponent; interface CodeViewerProps { showTabs?: boolean; showLineNumbers?: boolean; /** * Provides a way to draw or style a piece of the content. */ decorators?: Decorators; code?: string; wrapContent?: boolean; /** * This provides a way to control how some components are going to * be initialized on the page. The CodeEditor and the Preview components * are quite expensive and might overload the memory usage, so this gives * a certain control of when to initialize them. */ initMode?: SandpackInitMode; /** * Provides a way to add custom language modes by supplying a language * type, applicable file extensions, and a LanguageSupport instance * for that syntax mode */ additionalLanguages?: CustomLanguage[]; } declare const SandpackCodeViewer: vue.DefineComponent<{ showTabs?: boolean | undefined; showLineNumbers?: boolean | undefined; decorators?: Decorators | undefined; code?: string | undefined; wrapContent?: boolean | undefined; initMode?: SandpackInitMode | undefined; additionalLanguages?: CustomLanguage[] | undefined; }, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{ showTabs?: boolean | undefined; showLineNumbers?: boolean | undefined; decorators?: Decorators | undefined; code?: string | undefined; wrapContent?: boolean | undefined; initMode?: SandpackInitMode | undefined; additionalLanguages?: CustomLanguage[] | undefined; }> & Readonly<{}>, { additionalLanguages: CustomLanguage[]; initMode: SandpackInitMode; code: string; showLineNumbers: boolean; wrapContent: string; decorators: Decorators; showTabs: boolean; }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; interface NavigatorProps { clientId: string; onURLChange?: (newURL: string) => void; startRoute?: string; } declare const Navigator: DefineComponent; interface PreviewProps { showNavigator?: boolean; showOpenInCodeSandbox?: boolean; showRefreshButton?: boolean; showRestartButton?: boolean; /** * Whether to show the `` component on top of * the preview, if a runtime error happens. */ showSandpackErrorOverlay?: boolean; showOpenNewtab?: boolean; actionsChildren?: JSX.Element; startRoute?: string; } interface SandpackPreviewRef { /** * Retrieve the current Sandpack client instance from preview */ getClient: () => InstanceType | null; /** * Returns the client id, which will be used to * initialize a client in the main Sandpack context */ clientId: string; } declare const SandpackPreview: DefineComponent; declare const SandpackTranspiledCode: DefineComponent; type SandpackConsoleData = Array<{ data: Array> | undefined; id: string; method: SandpackMessageConsoleMethods; }>; interface SandpackConsoleProps { clientId?: string; showHeader?: boolean; showSyntaxError?: boolean; showSetupProgress?: boolean; showRestartButton?: boolean; showResetConsoleButton?: boolean; maxMessageCount?: number; onLogsChange?: (logs: SandpackConsoleData) => void; /** Reset the console list on every preview restart */ resetOnPreviewRestart?: boolean; standalone?: boolean; actionsChildren?: JSX.Element; } /** * `SandpackConsole` is a Sandpack devtool that allows printing * the console logs from a Sandpack client. It is designed to be * a light version of a browser console, which means that it's * limited to a set of common use cases you may encounter when coding. */ declare const SandpackConsole: DefineComponent; /** * It provides an interface to consume the logs from a sandpack client. * * @category Hooks */ declare const useSandpackConsole: (props?: { clientId?: string; maxMessageCount?: number; showSyntaxError?: boolean; resetOnPreviewRestart?: boolean; }) => { logs: Ref; reset: () => void; }; type TestStatus = 'idle' | 'running' | 'pass' | 'fail'; interface Test { name: string; blocks: string[]; status: TestStatus; path: string; errors: TestError[]; duration?: number | undefined; } interface Describe { name: string; tests: Record; describes: Record; } type Spec = { error?: TestError; } & Describe; interface Props { verbose?: boolean; watchMode?: boolean; onComplete?: (specs: Record) => void; actionsChildren?: JSX.Element; showVerboseButton?: boolean; showWatchButton?: boolean; /** * Hide the tests and supress logs * If `true` the tests will be hidden and the logs will be supressed. * This is useful when you want to run tests in the background and don't want to show the tests to the user. * @default false */ hideTestsAndSupressLogs?: boolean; standalone?: boolean; } declare const SandpackTests: DefineComponent; declare const layoutClassName: _stitches_core_types_styled_component.CssComponent .sp-file-explorer": { flex: number; minWidth: string; '@media screen and (max-width: 768px)': { flex: number; }; }; }>; declare const SandpackLayout: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; declare const stackClassName: _stitches_core_types_styled_component.CssComponent; declare const SandpackStack: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; declare const ErrorOverlay: vue.DefineComponent, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly> & Readonly<{}>, { clientId: string; }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; interface LoadingOverlayProps { clientId?: string; /** * It enforces keeping the loading state visible, * which is helpful for external loading states. */ loading?: boolean; showOpenInCodeSandbox: boolean; } declare const LoadingOverlay: DefineComponent; declare const OpenInCodeSandboxButton: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; declare const UnstyledOpenInCodeSandboxButton: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; declare const RunButton: vue.DefineComponent void) | undefined>; default: null; }; }>, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly void) | undefined>; default: null; }; }>> & Readonly<{}>, { onClick: ((event: MouseEvent) => void) | undefined; }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; declare const RoundedButton: vue.DefineComponent void)>; required: false; default: () => void; }; }>, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly void)>; required: false; default: () => void; }; }>> & Readonly<{}>, { onClick: (payload: MouseEvent) => void; title: string; }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; declare const DependenciesProgress: vue.DefineComponent, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly> & Readonly<{}>, { clientId: string; }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>; /** * This returns the current state of the active file * and a method to update its content. * * @category Hooks */ declare const useActiveCode: () => { code: Ref; readOnly: Ref; updateCode: (newCode: string, shouldUpdatePreview?: boolean) => void; }; type LoadingOverlayState = 'LOADING' | 'PRE_FADING' | 'FADING' | 'HIDDEN' | 'TIMEOUT'; declare const FADE_ANIMATION_DURATION = 200; interface LoadingOverlayStateProp { clientId?: string; /** * It enforces keeping the loading state visible, * which is helpful for external loading states. */ loading?: boolean; } /** * @category Hooks */ declare const useLoadingOverlayState: (props: LoadingOverlayStateProp) => vue.Ref; /** * @category Hooks */ declare const useSandpackNavigation: (clientId?: string) => { refresh: () => void; back: () => void; forward: () => void; }; interface SandpackThemeProviderContext { theme: SandpackTheme; id: string; mode: 'dark' | 'light'; } interface IProp extends HTMLAttributes { theme?: SandpackThemeProp; mode?: 'dark' | 'light'; } declare const SandpackThemeContext: InjectionKey; declare const SandpackThemeProvider: DefineComponent; /** * useSandpackTheme */ declare const useSandpackTheme: () => SandpackThemeProviderContext; type ContextType = any; interface CreateContext { Provider: DefineComponent<{}, () => VNode | VNode[] | undefined, any>; state: UnwrapRef | T; } declare const createContext: >(context: ContextType, contextInjectKey?: InjectionKey>) => CreateContext; declare const useContext: (contextInjectKey?: InjectionKey>, defaultValue?: ContextType) => T; interface ClientPropsOverride { startRoute?: string; } interface UseSandpack { sandpack: SandpackState; dispatch: SandpackClientDispatch; listen: SandpackClientListen; } declare const SandpackStateContext: InjectionKey>; /** * SandpackProvider * Main context provider that should wraps your entire component. * Use * [`useSandpack`](/api/react/#usesandpack) hook, which gives you the entire context object to play with. */ declare const SandpackProvider: DefineComponent; /** * useSandpack */ declare function useSandpack(): UseSandpack; interface UseSandpackClient { sandpack: SandpackState; getClient: () => InstanceType | null; iframe: Ref; listen: (listener: ListenerFunction) => UnsubscribeFunction; dispatch: (message: SandpackMessage) => void; clientId: Ref; } /** * It registers a new sandpack client and returns its instance, * listeners, and dispatch function. Using it when creating a custom * component to interact directly with the client is recommended. * For other cases, use `useSandpack` instead. * * @category Hooks */ declare const useSandpackClient: (clientPropsOverride?: ClientPropsOverride) => UseSandpackClient; /** * @category Hooks */ declare const useSandpackShell: (clientId?: string) => { restart: () => void; openPreview: () => void; }; declare const useClassNames: () => (customClassName: string, allClassNames?: any[]) => string; /** * @category Theme */ declare const defaultLight: SandpackTheme; /** * @category Theme */ declare const defaultDark: SandpackTheme; /** * @category Theme */ declare const SANDPACK_THEMES: Record; declare const RestartIcon: () => JSX.Element; declare const RunIcon: () => JSX.Element; declare const BackwardIcon: () => JSX.Element; declare const ForwardIcon: () => JSX.Element; declare const RefreshIcon: () => JSX.Element; declare const CleanIcon: () => JSX.Element; declare const ExportIcon: () => JSX.Element; declare const DirectoryIconOpen: () => JSX.Element; declare const DirectoryIconClosed: () => JSX.Element; declare const FileIcon: () => JSX.Element; declare const CloseIcon: () => JSX.Element; declare const ConsoleIcon: () => JSX.Element; declare const SignInIcon: () => JSX.Element; declare const SignOutIcon: () => JSX.Element; declare const getCssText: () => string; export { ANGULAR_TEMPLATE, BackwardIcon, CleanIcon, type ClientPropsOverride, CloseIcon, CodeMirror as CodeEditor, type CodeEditorProps, type CodeMirrorProps, type CodeMirrorRef, type CodeViewerProps, ConsoleIcon, type ContextType, type CreateContext, type CustomLanguage, type Decorators, type DeepPartial, DependenciesProgress, Directory, DirectoryIconClosed, DirectoryIconOpen, type EditorState, ErrorOverlay, ExportIcon, FADE_ANIMATION_DURATION, File, FileIcon, type FileResolver, FileTabs, type FileTabsProps, ForwardIcon, LoadingOverlay, type LoadingOverlayProps, type LoadingOverlayState, ModuleList, Navigator, OpenInCodeSandboxButton, type PreviewProps, REACT_TEMPLATE, REACT_TYPESCRIPT_TEMPLATE, RefreshIcon, RestartIcon, RoundedButton, RunButton, RunIcon, SANDBOX_TEMPLATES, SANDPACK_THEMES, SOLID_TEMPLATE, SVELTE_TEMPLATE, type SandboxEnvironment, type SandboxTemplate, Sandpack, type SandpackClientDispatch, type SandpackClientListen, SandpackCodeEditor, type SandpackCodeOptions, SandpackCodeViewer, SandpackConsole, type SandpackContext, type SandpackFile, SandpackFileExplorer, type SandpackFileExplorerProp, type SandpackFiles, type SandpackInitMode, type SandpackInternal, type SandpackInternalOptions, type SandpackInternalProps, type SandpackInternalProvider, SandpackLayout, type SandpackOptions, type SandpackPredefinedTemplate, type SandpackPredefinedTheme, SandpackPreview, type SandpackPreviewRef, type SandpackProps, SandpackProvider, type SandpackProviderProps, type SandpackProviderState, type SandpackSetup, SandpackStack, type SandpackState, SandpackStateContext, type SandpackStatus, SandpackTests, type SandpackTheme, SandpackThemeContext, type SandpackThemeProp, SandpackThemeProvider, type SandpackThemeProviderContext, SandpackTranspiledCode, SignInIcon, SignOutIcon, TEST_TYPESCRIPT_TEMPLATE, type TemplateFiles, UnstyledOpenInCodeSandboxButton, type UseSandpack, VANILLA_TEMPLATE, VANILLA_TYPESCRIPT_TEMPLATE, VITE_PREACT_TEMPLATE, VITE_PREACT_TS_TEMPLATE, VITE_REACT_TEMPLATE, VITE_REACT_TS_TEMPLATE, VITE_SVELTE_TEMPLATE, VITE_SVELTE_TS_TEMPLATE, VITE_TEMPLATE, VITE_VUE_TEMPLATE, VITE_VUE_TS_TEMPLATE, VUE2_TEMPLATE, VUE2_TS_TEMPLATE, VUE_TEMPLATE, VUE_TS_TEMPLATE, createContext, SanpackPlugin as default, defaultDark, defaultLight, getCssText as getSandpackCssText, layoutClassName, stackClassName, tabButton, useActiveCode, useClassNames, useContext, useLoadingOverlayState, useSandpack, useSandpackClient, useSandpackConsole, useSandpackNavigation, useSandpackShell, useSandpackTheme };