sandpack-vue3

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<string, string>; 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<string, string>; /** * 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<string, string>; /** * 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<SandpackTheme>; /** * * ------------------------ 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<Name extends SandpackPredefinedTemplate> = keyof typeof SANDBOX_TEMPLATES[Name]['files']; interface SandpackInternal { <Files extends SandpackFiles | any, TemplateName extends SandpackPredefinedTemplate = 'vanilla'>(props: SandpackInternalProps<Files, TemplateName> & { files?: Files; template?: TemplateName; }): JSX.Element; } interface SandpackInternalProvider { <Files extends SandpackFiles, TemplateName extends SandpackPredefinedTemplate>( /** * Infer files & template values */ props: SandpackProviderProps<Files, TemplateName> & { files?: Files; template?: TemplateName; children?: JSX.Element; }): SandpackProviderProps & SandpackProviderState; } interface SandpackRootProps<Files extends SandpackFiles | any, TemplateName extends SandpackPredefinedTemplate> { files?: Files; template?: TemplateName; customSetup?: SandpackSetup; theme?: SandpackThemeProp; className?: string; teamId?: string; sandboxId?: string; /** * @default false */ rtl?: boolean; } interface SandpackInternalOptions<Files extends SandpackFiles | any = any, TemplateName extends SandpackPredefinedTemplate = SandpackPredefinedTemplate> { 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<string, string>; } interface SandpackInternalProps<Files extends SandpackFiles | any, TemplateName extends SandpackPredefinedTemplate> extends SandpackRootProps<Files, TemplateName> { options?: SandpackInternalOptions<Files, TemplateName> & { 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<Files extends SandpackFiles = SandpackFiles, TemplateName extends SandpackPredefinedTemplate = SandpackPredefinedTemplate> extends SandpackRootProps<Files, TemplateName>, HTMLAttributes { options?: SandpackInternalOptions<Files, TemplateName>; 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<string, InstanceType<typeof SandpackClient>>; runSandpack: () => Promise<void>; registerBundler: (iframe: HTMLIFrameElement, clientId: string, clientPropsOverride?: ClientPropsOverride) => Promise<void>; 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<HTMLDivElement>; unsubscribeClientListenersRef: Ref<Record<string, Record<string, UnsubscribeFunction>>>; queuedListenersRef: Ref<Record<string, Record<string, ListenerFunction>>>; } type SandpackStatus = 'initial' | 'idle' | 'running' | 'timeout' | 'done'; type EditorState = 'pristine' | 'dirty'; interface SandboxTemplate { files: Record<string, SandpackFile>; dependencies: Record<string, string>; devDependencies?: Record<string, string>; entry?: string; main: string; environment: SandboxEnvironment; } type SandpackFiles = Record<string, string | SandpackFile>; /** * 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<Type> = { [Property in keyof Type]?: DeepPartial<Type[Property]>; }; interface FileResolver { isFile: (path: string) => Promise<boolean>; readFile: (path: string) => Promise<string>; } interface SandpackProviderState { files: SandpackBundlerFiles; environment?: SandboxEnvironment; visibleFiles: Array<TemplateFiles<SandpackPredefinedTemplate> | string>; activeFile: TemplateFiles<SandpackPredefinedTemplate> | 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<string, string>; }>; 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?: