REPL Component

/**
 * Main REPL component providing editor and preview functionality
 * @param props - Configuration options for the REPL
 */
interface ReplProps {
  /** UI theme for the REPL interface */
  theme?: 'dark' | 'light';
  /** Whether preview iframe should inherit the theme */
  previewTheme?: boolean;
  /** Editor component to use (required) - CodeMirror or Monaco */
  editor: EditorComponentType;
  /** Custom store instance, defaults to new store */
  store?: Store;
  /** Whether panels should auto-resize */
  autoResize?: boolean;
  /** Show compilation output tab in preview */
  showCompileOutput?: boolean;
  /** Show source map visualization option */
  showOpenSourceMap?: boolean;
  /** Show import map editor tab */
  showImportMap?: boolean;
  /** Show SSR output tab */
  showSsrOutput?: boolean;
  /** Show TypeScript config editor tab */
  showTsConfig?: boolean;
  /** Clear console on file changes */
  clearConsole?: boolean;
  /** Panel layout orientation */
  layout?: 'horizontal' | 'vertical';
  /** Reverse the position of editor and preview panels */
  layoutReverse?: boolean;
  /** Enable server-side rendering mode */
  ssr?: boolean;
  /** Preview iframe customization options */
  previewOptions?: PreviewOptions;
  /** Editor-specific configuration options */
  editorOptions?: EditorOptions;
  /** Split pane UI customization options */
  splitPaneOptions?: SplitPaneOptions;
}

interface PreviewOptions {
  /** Custom HTML to inject into preview iframe head */
  headHTML?: string;
  /** Custom HTML to inject into preview iframe body */
  bodyHTML?: string;
  /** HTML to show when preview is loading */
  placeholderHTML?: string;
  /** Custom code injection for advanced use cases */
  customCode?: {
    /** Custom import statements to add to preview */
    importCode?: string;
    /** Custom code to execute in preview context */
    useCode?: string;
  };
  /** Whether to display runtime errors in preview */
  showRuntimeError?: boolean;
  /** Whether to display runtime warnings in preview */
  showRuntimeWarning?: boolean;
}

interface EditorOptions {
  /** Custom error display text, or false to hide */
  showErrorText?: string | false;
  /** Custom auto-save indicator text, or false to hide */
  autoSaveText?: string | false;
  /** Monaco editor specific configuration options */
  monacoOptions?: monaco.editor.IStandaloneEditorConstructionOptions;
}

interface SplitPaneOptions {
  /** Text for code panel toggle button */
  codeTogglerText?: string;
  /** Text for output panel toggle button */
  outputTogglerText?: string;
}

import { Repl } from "@vue/repl";
import Monaco from "@vue/repl/monaco-editor";

// Basic usage with Monaco editor
<template>
  <Repl :editor="Monaco" />
</template>

// Advanced configuration
<template>
  <Repl 
    :editor="Monaco"
    theme="dark"
    :previewTheme="true"
    layout="vertical"
    :showCompileOutput="true"
    :showImportMap="true"
    :previewOptions="{
      headHTML: '<meta name=\"viewport\" content=\"width=device-width\">',
      showRuntimeError: true
    }"
    :editorOptions="{
      monacoOptions: {
        fontSize: 14,
        minimap: { enabled: false }
      }
    }"
  />
</template>

/**
 * Reload the preview iframe, useful for clearing runtime state
 */
function reload(): void;

<template>
  <Repl ref="repl" :editor="Monaco" />
  <button @click="$refs.repl.reload()">Reload Preview</button>
</template>

/**
 * Auto-save model value - whether files are automatically saved
 */
const autoSave: ModelRef<boolean>;

<template>
  <Repl 
    v-model:autoSave="autoSaveEnabled"
    :editor="Monaco" 
  />
  <label>
    <input type="checkbox" v-model="autoSaveEnabled" />
    Enable Auto-save
  </label>
</template>

<script setup>
import { ref } from 'vue';
const autoSaveEnabled = ref(true);
</script>