Store Management

/**
 * Creates and configures a REPL store instance with reactive state management
 * @param state - Partial state configuration to override defaults
 * @param serializedState - Optional serialized state string to restore from URL hash
 * @returns Configured ReplStore instance with reactive file management
 */
function useStore(
  state?: Partial<StoreState>,
  serializedState?: string
): ReplStore;

interface StoreState {
  /** Files in the REPL mapped by filename */
  files: Record<string, File>;
  /** Currently active filename being edited */
  activeFilename: string;
  /** Main entry file (typically src/App.vue) */
  mainFile: string;
  /** Template code for new files */
  template: {
    welcomeSFC?: string;
    newSFC?: string;
  };
  /** Built-in import map for Vue and dependencies */
  builtinImportMap: ImportMap;
  /** Compilation errors and warnings */
  errors: (string | Error)[];
  /** Whether output panel is visible (mobile) */
  showOutput: boolean;
  /** Current output mode tab */
  outputMode: OutputModes;
  /** Vue SFC compilation options */
  sfcOptions: SFCOptions;
  /** SSR compilation results */
  ssrOutput: {
    html: string;
    context: unknown;
  };
  /** Vue compiler instance */
  compiler: typeof defaultCompiler;
  /** Vue version for CDN imports */
  vueVersion: string | null;
  /** Locale for language tools */
  locale: string | undefined;
  /** TypeScript version */
  typescriptVersion: string;
  /** Dependency versions map */
  dependencyVersion: Record<string, string>;
  /** Function to reload language tools */
  reloadLanguageTools?: (() => void) | undefined;
}

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

// Basic store creation
const store = useStore();

// Store with custom configuration
const store = useStore({
  showOutput: ref(true),
  outputMode: ref('preview'),
  vueVersion: ref('3.4.0')
});

// Store with URL state restoration
const store = useStore({}, location.hash);

// Store with custom import map
const { importMap, vueVersion } = useVueImportMap({
  vueVersion: '3.4.0'
});
const store = useStore({
  builtinImportMap: importMap,
  vueVersion
});

/**
 * Set the active file being edited
 * @param filename - Filename to make active
 */
function setActive(filename: string): void;

/**
 * Add a new file to the store
 * @param fileOrFilename - File instance or filename string
 */
function addFile(fileOrFilename: string | File): void;

/**
 * Delete a file from the store with confirmation
 * @param filename - Filename to delete
 */
function deleteFile(filename: string): void;

/**
 * Rename an existing file with validation
 * @param oldFilename - Current filename
 * @param newFilename - New filename
 */
function renameFile(oldFilename: string, newFilename: string): void;

/**
 * Export all files as plain object (strips src/ prefix)
 * @returns Object mapping filenames to code content
 */
function getFiles(): Record<string, string>;

/**
 * Import files from plain object, replacing current files
 * @param newFiles - Object mapping filenames to code content
 * @param mainFile - Optional main file override
 */
function setFiles(newFiles: Record<string, string>, mainFile?: string): Promise<void>;

// Add new files
store.addFile('src/components/Button.vue');
store.addFile(new File('src/utils/helpers.ts', 'export const helper = () => {}'));

// Set active file
store.setActive('src/components/Button.vue');

// Rename file
store.renameFile('src/Button.vue', 'src/components/Button.vue');

// Export/import files
const files = store.getFiles();
await store.setFiles({
  'App.vue': '<template><div>Hello</div></template>',
  'utils.ts': 'export const util = () => {}'
});

// Delete file (shows confirmation dialog)
store.deleteFile('src/old-component.vue');

/**
 * Get current import map configuration
 * @returns Parsed import map object
 */
function getImportMap(): ImportMap;

/**
 * Update import map configuration
 * @param map - New import map configuration
 * @param merge - Whether to merge with existing map
 */
function setImportMap(map: ImportMap, merge?: boolean): void;

/**
 * Get current TypeScript configuration
 * @returns Parsed tsconfig object
 */
function getTsConfig(): Record<string, any>;

// Get current import map
const currentMap = store.getImportMap();

// Set new import map
store.setImportMap({
  imports: {
    'lodash': 'https://cdn.skypack.dev/lodash',
    'axios': 'https://cdn.skypack.dev/axios'
  }
});

// Merge with existing import map
store.setImportMap({
  imports: {
    'dayjs': 'https://cdn.skypack.dev/dayjs'
  }
}, true);

// Get TypeScript config
const tsConfig = store.getTsConfig();

/**
 * Serialize store state to URL hash string
 * @returns Base64 encoded state string with # prefix
 */
function serialize(): string;

/**
 * Restore store state from serialized string
 * @param serializedState - Base64 encoded state string
 * @param checkBuiltinImportMap - Whether to apply built-in import map
 */
function deserialize(serializedState: string, checkBuiltinImportMap?: boolean): void;

// Serialize current state
const stateString = store.serialize();
console.log(stateString); // "#eyJBcHAudnVlIjoiPHRlbXBsYXRlPi4uLiJ9"

// Persist to URL
history.replaceState({}, '', store.serialize());

// Restore from URL
store.deserialize(location.hash);

// Watch for changes and auto-persist
watchEffect(() => {
  history.replaceState({}, '', store.serialize());
});

/**
 * Initialize store watchers, compilation system, and default files
 * Must be called before using the store
 */
function init(): void;

const store = useStore();
store.init(); // Start compilation watchers and initialize default files

interface ReplStore extends UnwrapRef<StoreState> {
  /** Currently active file object */
  activeFile: File;
  /** Whether compiler is loading */
  loading: boolean;
  
  // All methods listed above
  init(): void;
  setActive(filename: string): void;
  // ... (other methods)
}

/** Standard filename for import map configuration */
const importMapFile: string = 'import-map.json';

/** Standard filename for TypeScript configuration */
const tsconfigFile: string = 'tsconfig.json';