// vite.config.ts
import { defineConfig } from "vite";
export default defineConfig({
  optimizeDeps: {
    exclude: ["react-repl-plus"],
  },
  // ...
});

export interface ReplProps {
  /**
   * 全局数据
   */
  store?: ReplStore;
  /**
   * 是否自动保存
   * @default true
   */
  autoSave?: boolean;
  /**
   * 主题色
   * @default "light"
   */
  theme?: Theme;
  /**
   * 布局
   * @default 'horizontal'
   */
  layout?: "horizontal" | "vertical";
}

useStore({
    // file template
    template: {
      welcomeCode: string; // main file template
      templateCode: string; // other file template
    };
    mainFile: string; // main file filename
    activeFilename: string; // current active file filename
    builtinImportMap: ImportMap;     // pre-set import map
  },
  // initialize repl with previously serialized state
  serializedState?: string
)

import { Repl } from "react-repl-plus";
import "react-repl-plus/style.css";

export default function App() {
  return <Repl></Repl>;
}

import { Repl, useStore } from "react-repl-plus";
import "react-repl-plus/style.css";
const Playground = () => {
  const [theme, setTheme] = useState<Theme>("light");

  const hash = location.hash.slice(1);

  const store = useStore({}, hash);

  const newHash = store.serialize();
  useEffect(() => {
    history.replaceState({}, "", newHash);
  }, [newHash]);

  useEffect(() => {
    document.documentElement.className = theme;

    return () => {
      document.documentElement.className = "";
    };
  }, [theme]);

  return (
    <div className="playground-container">
      <Header theme={theme} onChangeTheme={(value) => setTheme(value)}></Header>
      <Repl store={store} theme={theme} layout={layout.current}></Repl>
    </div>
  );
};
export default Playground;