vitepress-plugin-sandpack
Version:
use sandpack-vue3 in vitepress as directive.
778 lines (760 loc) • 22.8 kB
TypeScript
import { AllowedComponentProps } from 'vue';
import * as allThemes from '@codesandbox/sandpack-themes';
import { ComponentCustomProps } from 'vue';
import { ComponentOptionsMixin } from 'vue';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { NpmRegistry } from '@codesandbox/sandpack-client';
import { PropType } from 'vue';
import { SandpackFiles } from 'sandpack-vue3';
import { SandpackPredefinedTemplate } from 'sandpack-vue3';
import type { Slots } from 'vue';
import { VNodeProps } from 'vue';
export declare const getCustomSetupFromProps: (props: SandpackProp) => any;
export declare const getDefaultFileName: (template: SandpackPredefinedTemplate | undefined) => string;
export declare const getFileAttributes: (info: string, template?: SandpackPredefinedTemplate) => {
hidden: boolean;
active: boolean;
readOnly: boolean;
path: string | undefined;
};
export declare const getSandpackFiles: (props: SandpackProp, slot: Slots) => Promise<SandpackFiles>;
export declare const getSandpackOptions: (props?: SandpackProp) => {
autorun: boolean;
editorWidthPercentage: number;
showNavigator: boolean;
showLineNumbers: boolean;
showRefreshButton: boolean;
showTabs: boolean;
showConsoleButton: boolean;
showConsole: boolean;
closableTabs: boolean;
wrapContent: boolean;
resizablePanels: boolean;
readOnly: boolean;
showReadOnly: boolean;
};
export declare const parsedBoolean: (prop?: PropBool) => boolean;
export declare const parsedDeps: (deps: string | Record<string, string> | undefined) => Record<string, string> | undefined;
export declare type PropBool = boolean | 'true' | 'false' | '0' | '1';
/**
* @param htmlTag
* @description htmltag name to component name
* ```js
* 'sanbox' -> 'Sandbox'
* 'sandbox-react' -> SandboxReact
* ```
*/
export declare const renderSandbox: (tokenList: any[], index: number, htmlTagName: string) => string;
export declare const Sandbox: DefineComponent<{
lightTheme: {
type: PropType<"amethyst" | "aquaBlue" | "atomDark" | "cobalt2" | "cyberpunk" | "dracula" | "ecoLight" | "freeCodeCampDark" | "githubLight" | "gruvboxDark" | "gruvboxLight" | "levelUp" | "monokaiPro" | "neoCyan" | "nightOwl" | "sandpackDark">;
required: boolean;
default: string;
};
darkTheme: {
type: PropType<"amethyst" | "aquaBlue" | "atomDark" | "cobalt2" | "cyberpunk" | "dracula" | "ecoLight" | "freeCodeCampDark" | "githubLight" | "gruvboxDark" | "gruvboxLight" | "levelUp" | "monokaiPro" | "neoCyan" | "nightOwl" | "sandpackDark">;
required: boolean;
default: string;
};
template: {
type: PropType<"react" | "react-ts" | "vue2" | "vue2-ts" | "vue" | "vue-ts" | "vue3" | "vue3-ts" | "vanilla" | "vanilla-ts" | "static" | "angular" | "svelte" | "solid" | "test-ts" | "node" | "nextjs" | "vite" | "vite-react" | "vite-react-ts" | "vite-preact" | "vite-preact-ts" | "vite-vue" | "vite-vue-ts" | "vite-svelte" | "vite-svelte-ts" | "vite-solid" | "vite-lit" | "astro">;
required: boolean;
default: string;
};
hideEditor: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
rtl: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
options: {
type: PropType<SandpackOptions>;
required: boolean;
default: undefined;
};
autorun: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
previewHeight: {
type: NumberConstructor;
required: boolean;
default: undefined;
};
coderHeight: {
type: NumberConstructor;
required: boolean;
default: undefined;
};
showNavigator: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
showLineNumbers: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
showRefreshButton: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
showTabs: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
showConsoleButton: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
showConsole: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
closableTabs: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
wrapContent: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
resizablePanels: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
readOnly: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
showReadOnly: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
customSetup: {
type: PropType<SandpackCustomSetup>;
required: boolean;
default: undefined;
};
deps: {
type: PropType<string | Record<string, string>>;
required: boolean;
default: undefined;
};
devDeps: {
type: PropType<string | Record<string, string>>;
required: boolean;
default: undefined;
};
entry: {
type: StringConstructor;
required: boolean;
default: undefined;
};
codeOptions: {
type: StringConstructor;
required: boolean;
default: undefined;
};
}, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
lightTheme: {
type: PropType<"amethyst" | "aquaBlue" | "atomDark" | "cobalt2" | "cyberpunk" | "dracula" | "ecoLight" | "freeCodeCampDark" | "githubLight" | "gruvboxDark" | "gruvboxLight" | "levelUp" | "monokaiPro" | "neoCyan" | "nightOwl" | "sandpackDark">;
required: boolean;
default: string;
};
darkTheme: {
type: PropType<"amethyst" | "aquaBlue" | "atomDark" | "cobalt2" | "cyberpunk" | "dracula" | "ecoLight" | "freeCodeCampDark" | "githubLight" | "gruvboxDark" | "gruvboxLight" | "levelUp" | "monokaiPro" | "neoCyan" | "nightOwl" | "sandpackDark">;
required: boolean;
default: string;
};
template: {
type: PropType<"react" | "react-ts" | "vue2" | "vue2-ts" | "vue" | "vue-ts" | "vue3" | "vue3-ts" | "vanilla" | "vanilla-ts" | "static" | "angular" | "svelte" | "solid" | "test-ts" | "node" | "nextjs" | "vite" | "vite-react" | "vite-react-ts" | "vite-preact" | "vite-preact-ts" | "vite-vue" | "vite-vue-ts" | "vite-svelte" | "vite-svelte-ts" | "vite-solid" | "vite-lit" | "astro">;
required: boolean;
default: string;
};
hideEditor: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
rtl: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
options: {
type: PropType<SandpackOptions>;
required: boolean;
default: undefined;
};
autorun: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
previewHeight: {
type: NumberConstructor;
required: boolean;
default: undefined;
};
coderHeight: {
type: NumberConstructor;
required: boolean;
default: undefined;
};
showNavigator: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
showLineNumbers: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
showRefreshButton: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
showTabs: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
showConsoleButton: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
showConsole: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
closableTabs: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
wrapContent: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
resizablePanels: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
readOnly: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
showReadOnly: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
customSetup: {
type: PropType<SandpackCustomSetup>;
required: boolean;
default: undefined;
};
deps: {
type: PropType<string | Record<string, string>>;
required: boolean;
default: undefined;
};
devDeps: {
type: PropType<string | Record<string, string>>;
required: boolean;
default: undefined;
};
entry: {
type: StringConstructor;
required: boolean;
default: undefined;
};
codeOptions: {
type: StringConstructor;
required: boolean;
default: undefined;
};
}>>, {
lightTheme: "amethyst" | "aquaBlue" | "atomDark" | "cobalt2" | "cyberpunk" | "dracula" | "ecoLight" | "freeCodeCampDark" | "githubLight" | "gruvboxDark" | "gruvboxLight" | "levelUp" | "monokaiPro" | "neoCyan" | "nightOwl" | "sandpackDark";
darkTheme: "amethyst" | "aquaBlue" | "atomDark" | "cobalt2" | "cyberpunk" | "dracula" | "ecoLight" | "freeCodeCampDark" | "githubLight" | "gruvboxDark" | "gruvboxLight" | "levelUp" | "monokaiPro" | "neoCyan" | "nightOwl" | "sandpackDark";
template: "react" | "react-ts" | "vue2" | "vue2-ts" | "vue" | "vue-ts" | "vue3" | "vue3-ts" | "vanilla" | "vanilla-ts" | "static" | "angular" | "svelte" | "solid" | "test-ts" | "node" | "nextjs" | "vite" | "vite-react" | "vite-react-ts" | "vite-preact" | "vite-preact-ts" | "vite-vue" | "vite-vue-ts" | "vite-svelte" | "vite-svelte-ts" | "vite-solid" | "vite-lit" | "astro";
rtl: PropBool;
options: SandpackOptions;
customSetup: SandpackCustomSetup;
codeOptions: string;
autorun: PropBool;
hideEditor: PropBool;
previewHeight: number;
coderHeight: number;
showNavigator: PropBool;
showLineNumbers: PropBool;
showRefreshButton: PropBool;
showTabs: PropBool;
showConsoleButton: PropBool;
showConsole: PropBool;
closableTabs: PropBool;
wrapContent: PropBool;
resizablePanels: PropBool;
readOnly: PropBool;
showReadOnly: PropBool;
deps: string | Record<string, string>;
devDeps: string | Record<string, string>;
entry: string;
}, {}>;
export declare type SandboxProp = typeof sandboxProps;
export declare const sandboxProps: {
/**
* light theme name
* @default 'light'
*/
lightTheme: {
type: PropType<"amethyst" | "aquaBlue" | "atomDark" | "cobalt2" | "cyberpunk" | "dracula" | "ecoLight" | "freeCodeCampDark" | "githubLight" | "gruvboxDark" | "gruvboxLight" | "levelUp" | "monokaiPro" | "neoCyan" | "nightOwl" | "sandpackDark">;
required: boolean;
default: string;
};
/**
* dark theme name
* @default 'dark'
*/
darkTheme: {
type: PropType<"amethyst" | "aquaBlue" | "atomDark" | "cobalt2" | "cyberpunk" | "dracula" | "ecoLight" | "freeCodeCampDark" | "githubLight" | "gruvboxDark" | "gruvboxLight" | "levelUp" | "monokaiPro" | "neoCyan" | "nightOwl" | "sandpackDark">;
required: boolean;
default: string;
};
/**
* sandbox language
* @default 'vue3'
*/
template: {
type: PropType<"react" | "react-ts" | "vue2" | "vue2-ts" | "vue" | "vue-ts" | "vue3" | "vue3-ts" | "vanilla" | "vanilla-ts" | "static" | "angular" | "svelte" | "solid" | "test-ts" | "node" | "nextjs" | "vite" | "vite-react" | "vite-react-ts" | "vite-preact" | "vite-preact-ts" | "vite-vue" | "vite-vue-ts" | "vite-svelte" | "vite-svelte-ts" | "vite-solid" | "vite-lit" | "astro">;
required: boolean;
default: string;
};
/**
* hide code editor
* @default false
*/
hideEditor: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* right to left layout
* @default false
*/
rtl: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* sandbox options
* @default undefined
*/
options: {
type: PropType<SandpackOptions>;
required: boolean;
default: undefined;
};
/**
* auto run code
* @default true
*/
autorun: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* preview area height, default undefined
* @default undefined
*/
previewHeight: {
type: NumberConstructor;
required: boolean;
default: undefined;
};
/**
* editor area height, default undefined
* @default undefined
*/
coderHeight: {
type: NumberConstructor;
required: boolean;
default: undefined;
};
/**
* show route navigator in preview area
* @default false
*/
showNavigator: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* show line numbers in editor file
* @default false
*/
showLineNumbers: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* show refresh button in preview area
* @default true
*/
showRefreshButton: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* show tabs in editor area
* @default true
*/
showTabs: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* show console button in preview area
* @default true
*/
showConsoleButton: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* show console panel in preview area
* @default false
*/
showConsole: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* enable close editor file
* @default false
*/
closableTabs: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* enable wrap content of editor file
* @default false
*/
wrapContent: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* enable resizable editor width
* @default true
*/
resizablePanels: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* endable readonly of editor file
* @default false
*/
readOnly: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* show readonly label in editor file
* @default true
*/
showReadOnly: {
type: PropType<PropBool>;
required: boolean;
default: boolean;
};
/**
* sandbox custom setup, like `dependencies` or `devDependencies`...
* @default undefined
*/
customSetup: {
type: PropType<SandpackCustomSetup>;
required: boolean;
default: undefined;
};
/**
* 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",
* }
*
* // or
*
* '@material-ui/core: ^4.12.3, react: latest'
* ```
*/
deps: {
type: PropType<string | Record<string, string>>;
required: boolean;
default: undefined;
};
/**
* 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",
* }
*
* // or
*
* '@types/react: latest'
* ```
*/
devDeps: {
type: PropType<string | Record<string, string>>;
required: boolean;
default: undefined;
};
/**
* 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: {
type: StringConstructor;
required: boolean;
default: undefined;
};
/** this is a build-in prop, do not edit it */
codeOptions: {
type: StringConstructor;
required: boolean;
default: undefined;
};
};
export declare interface SandpackCustomSetup {
/**
* 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",
* }
*
* // or
*
* '@material-ui/core: ^4.12.3, react: latest'
* ```
*/
deps?: Record<string, 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",
* }
*
* // or
*
* '@types/react: latest'
* ```
*/
devDeps?: Record<string, 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;
/**
* 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?: Array<Omit<NpmRegistry, 'proxyEnabled'>>;
}
export declare interface SandpackOptions {
/**
* auto run code
* @default true
*/
autorun?: PropBool;
/**
* hide code editor
* @default true
*/
hideEditor?: PropBool;
/**
* deprecated from 0.3.0
* @deprecated
*/
editorWidthPercentage?: number | string;
/**
* preview area height, default undefined
* @default undefined
*/
previewHeight?: number;
/**
* editor area height, default undefined
* @default undefined
*/
coderHeight?: number;
/**
* show route navigator in preview area
* @default false
*/
showNavigator?: PropBool;
/**
* show line numbers in editor file
* @default false
*/
showLineNumbers?: PropBool;
/**
* show refresh button in preview area
* @default true
*/
showRefreshButton?: PropBool;
/**
* show tabs in editor area
* @default true
*/
showTabs?: PropBool;
/**
* show console button in preview area
* @default true
*/
showConsoleButton?: PropBool;
/**
* show console panel in preview area
* @default false
*/
showConsole?: PropBool;
/**
* enable close editor file
* @default false
*/
closableTabs?: PropBool;
/**
* enable wrap content of editor file
* @default false
*/
wrapContent?: PropBool;
/**
* enable resizable editor width
* @default true
*/
resizablePanels?: PropBool;
/**
* endable readonly of editor file
* @default false
*/
readOnly?: PropBool;
/**
* show readonly label in editor file
* @default true
*/
showReadOnly?: PropBool;
}
export declare interface SandpackProp extends SandpackOptions, SandpackCustomSetup {
/**
* light theme name
* @default 'light'
*/
lightTheme?: Theme;
/**
* dark theme name
* @default 'dark'
*/
darkTheme?: Theme;
/**
* sandbox language
* @default 'vue3'
*/
template?: SandpackPredefinedTemplate;
/**
* right to left layout
* @default false
*/
rtl?: PropBool;
/**
* right to left layout
* @default undefined
*/
options?: SandpackOptions;
/**
* sandbox custom setup, like `dependencies` or `devDependencies`...
* @default undefined
*/
customSetup?: SandpackCustomSetup;
/** this is a build-in prop, do not edit it */
codeOptions?: string;
}
export declare type Theme = keyof typeof allThemes;
export { }