Preview System

/**
 * Standalone sandbox component for preview-only mode
 * Provides iframe-based Vue component execution with error handling
 * @param props - Configuration options for the sandbox
 */
interface SandboxProps {
  /** Store instance containing files and compilation state */
  store: Store;
  /** Whether to display the sandbox (useful for mobile responsive behavior) */
  show?: boolean;
  /** Enable server-side rendering mode */
  ssr?: boolean;
  /** Clear console output on file changes */
  clearConsole?: boolean;
  /** Theme for the preview iframe */
  theme?: 'dark' | 'light';
  /** Preview customization options */
  previewOptions?: PreviewOptions;
  /** Whether to automatically initialize the store (default: true) */
  autoStoreInit?: boolean;
}

interface PreviewOptions {
  /** Custom HTML to inject into iframe head section */
  headHTML?: string;
  /** Custom HTML to inject into iframe body section */
  bodyHTML?: string;
  /** HTML content to show while preview is loading */
  placeholderHTML?: string;
  /** Advanced code injection options */
  customCode?: {
    /** Custom import statements for the preview context */
    importCode?: string;
    /** Custom code to execute in the preview environment */
    useCode?: string;
  };
  /** Whether to display runtime JavaScript errors */
  showRuntimeError?: boolean;
  /** Whether to display runtime console warnings */
  showRuntimeWarning?: boolean;
}

import { Sandbox, useStore } from "@vue/repl";

// Basic sandbox usage
<template>
  <Sandbox :store="store" />
</template>

<script setup>
const store = useStore({}, location.hash);
</script>

// Advanced sandbox with custom options
<template>
  <Sandbox 
    :store="store"
    theme="dark"
    :clearConsole="true"
    :previewOptions="{
      headHTML: '<meta name=\"viewport\" content=\"width=device-width\">',
      bodyHTML: '<div id=\"app\"></div>',
      showRuntimeError: true,
      showRuntimeWarning: false,
      customCode: {
        importCode: 'import { createApp } from \"vue\";',
        useCode: 'app.config.errorHandler = (err) => console.error(err);'
      }
    }"
  />
</template>

/**
 * Preview wrapper component used within REPL interface
 * Provides theme integration and reload functionality
 * @param props - Preview configuration
 */
interface PreviewProps {
  /** Whether to show the preview panel */
  show: boolean;
  /** Enable server-side rendering mode */
  ssr: boolean;
}

// Used internally by Repl component
<Preview :show="showPreview" :ssr="ssrMode" />

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

/**
 * Get reference to the preview container DOM element
 * @returns HTMLDivElement container or null
 */
readonly container: ComputedRef<HTMLDivElement | null>;

<template>
  <Sandbox ref="sandbox" :store="store" />
  <button @click="$refs.sandbox.reload()">Reload Preview</button>
</template>

<script setup>
import { ref } from 'vue';

const sandbox = ref();

// Access container element
const containerEl = computed(() => sandbox.value?.container);
</script>

/**
 * Runtime error information captured in preview
 */
interface RuntimeError {
  /** Error message */
  message: string;
  /** Stack trace if available */
  stack?: string;
  /** Source filename */
  filename?: string;
  /** Line number */
  lineno?: number;
  /** Column number */
  colno?: number;
}

/**
 * Runtime warning information
 */
interface RuntimeWarning {
  /** Warning message */
  message: string;
  /** Warning type/category */
  type: string;
}

// Enable error display
<Sandbox 
  :store="store"
  :previewOptions="{
    showRuntimeError: true,
    showRuntimeWarning: true
  }"
/>

/**
 * SSR output structure
 */
interface SSROutput {
  /** Rendered HTML string */
  html: string;
  /** SSR context object */
  context: unknown;
}

// Enable SSR mode
<template>
  <Sandbox :store="store" :ssr="true" />
</template>

// Access SSR output from store
<script setup>
const store = useStore();
console.log(store.ssrOutput.html); // Server-rendered HTML
</script>