nextui/apps/docs/hooks/use-stackblitz.ts

import type {Project} from "@stackblitz/sdk";
import type {SandpackFiles} from "@codesandbox/sandpack-react/types";

import {mapKeys, omit} from "@/../../packages/utilities/shared-utils/src";
import {useSandpack} from "@/components/sandpack/use-sandpack";

export interface UseSandpackProps {
  files: SandpackFiles;
  typescriptStrict?: boolean;
}

const viteConfig = `import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});
`;

function transformSandpackFiles(files: SandpackFiles) {
  return Object.fromEntries(
    Object.entries(files).map(([key, value]) => [
      key,
      typeof value === "string" ? value : value.code,
    ]),
  );
}

export function useStackblitz(props: UseSandpackProps) {
  const {files, typescriptStrict = false} = props;

  const {
    customSetup,
    files: filesData,
    entryFile,
  } = useSandpack({
    files: transformSandpackFiles(files),
    typescriptStrict,
  });

  // in stackblitz, npm will be used to install dependencies
  // it doesn't need `public-hoist-pattern[]=*@heroui/*`
  const filteredFilesData = Object.keys(filesData)
    .filter((k) => k !== ".npmrc")
    .reduce((o, k) => {
      o[k] = filesData[k];

      return o;
    }, {});

  const transformFiles = mapKeys(filteredFilesData, (_, key) => key.replace(/^\//, ""));

  const dependencies = {...customSetup.dependencies, ...customSetup.devDependencies};

  const packageJson = `{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "18.3.1",
    "react-dom": "18.3.1",
    ${Object.entries(
      omit(dependencies as any, [
        "react",
        "react-dom",
        "react-dom/client",
        "@vitejs/plugin-react",
        "vite",
        "autoprefixer",
        "postcss",
        "tailwindcss",
      ]),
    )
      .map(([key, value]) => `"${key}": "${value}"`)
      .join(",\n    ")}
  },
  "devDependencies": {
    "@vitejs/plugin-react": "4.3.4",
    "vite": "6.0.6",
    "autoprefixer": "10.4.20",
    "postcss": "8.4.49",
    "tailwindcss": "3.4.17"
  },
  "main": "/index.jsx"
}`;

  const stackblitzPrefillConfig: Project = {
    files: {
      ...transformSandpackFiles(transformFiles),
      "vite.config.js": viteConfig,
      "package.json": packageJson,
    },
    dependencies,
    title: "HeroUI",
    template: "node",
  };

  const findEntryFile = Object.keys(stackblitzPrefillConfig.files).find((key) =>
    key.includes("App"),
  );

  return {
    entryFile: findEntryFile ?? entryFile,
    stackblitzPrefillConfig,
  };
}