feat(admin,admin-ui,medusa): Add Medusa Admin plugin (#3334)

packages/admin-ui/src/index.ts

@@ -0,0 +1,28 @@
+import fse from "fs-extra"
+import { resolve } from "path"
+import vite from "vite"
+import { AdminBuildConfig } from "./types"
+import { getCustomViteConfig } from "./utils"
+
+async function build(options?: AdminBuildConfig) {
+  const config = getCustomViteConfig(options)
+
+  await vite.build(config).catch((_err) => {
+    process.exit(1)
+  })
+
+  await fse.writeJSON(
+    resolve(config.build.outDir, "build-manifest.json"),
+    options
+  )
+}
+
+async function watch() {
+  throw new Error("Not implemented")
+}
+
+async function clean() {
+  throw new Error("Not implemented")
+}
+
+export { build, watch, clean }

packages/admin-ui/src/types/build.ts

@@ -0,0 +1,15 @@
+import { DeepPartial } from "./misc"
+
+type GlobalsConfig = {
+  base?: string
+  backend?: string
+}
+
+type BuildConfig = {
+  outDir?: string
+}
+
+export type AdminBuildConfig = {
+  globals?: DeepPartial<GlobalsConfig>
+  build?: DeepPartial<BuildConfig>
+}

packages/admin-ui/src/types/config.ts

@@ -0,0 +1,5 @@
+import { AdminBuildConfig } from "./build"
+
+export type AdminUIConfig = {
+  build?: AdminBuildConfig
+}

packages/admin-ui/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from "./build"
+export * from "./misc"

packages/admin-ui/src/types/misc.ts

@@ -0,0 +1,9 @@
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends (infer U)[]
+    ? DeepPartial<U>[]
+    : T[P] extends ReadonlyArray<infer V>
+    ? ReadonlyArray<DeepPartial<V>>
+    : DeepPartial<T[P]>
+}
+
+export type Base<T extends string> = `/${T}/`

packages/admin-ui/src/utils/format-base.ts

@@ -0,0 +1,5 @@
+import { Base } from "../types"
+
+export const formatBase = <T extends string>(base: T): Base<T> => {
+  return `/${base}/`
+}

packages/admin-ui/src/utils/get-custom-vite-config.ts

@@ -0,0 +1,76 @@
+import react from "@vitejs/plugin-react"
+import { resolve } from "path"
+import { BuildOptions, InlineConfig } from "vite"
+import { AdminBuildConfig } from "../types"
+import { formatBase } from "./format-base"
+
+export const getCustomViteConfig = (config: AdminBuildConfig): InlineConfig => {
+  const { globals = {}, build = {} } = config
+
+  const uiPath = resolve(__dirname, "..", "..", "ui")
+
+  const globalReplacements = () => {
+    const base = globals.base || "app"
+
+    let backend = "/"
+
+    if (globals.backend) {
+      try {
+        // Test if the backend is a valid URL
+        new URL(globals.backend)
+        backend = globals.backend
+      } catch (_e) {
+        throw new Error(
+          `The provided backend URL is not valid: ${globals.backend}. Please provide a valid URL (e.g. https://my-medusa-server.com).`
+        )
+      }
+    }
+
+    return {
+      __BASE__: JSON.stringify(`/${base}`),
+      __MEDUSA_BACKEND_URL__: JSON.stringify(backend),
+    }
+  }
+
+  const buildConfig = (): BuildOptions => {
+    const { outDir } = build
+
+    let destDir: string
+
+    if (!outDir) {
+      /**
+       * Default build directory is at the root of the `@medusajs/admin-ui` package.
+       */
+      destDir = resolve(__dirname, "..", "..", "build")
+    } else {
+      /**
+       * If a custom build directory is specified, it is resolved relative to the
+       * current working directory.
+       */
+      destDir = resolve(process.cwd(), outDir)
+    }
+
+    return {
+      outDir: destDir,
+      emptyOutDir: true,
+    }
+  }
+
+  return {
+    plugins: [react()],
+    root: uiPath,
+    mode: "production",
+    base: formatBase(globals.base),
+    define: globalReplacements(),
+    build: buildConfig(),
+    resolve: {
+      alias: {
+        "@tanstack/react-query": resolve(
+          require.resolve("@tanstack/react-query")
+        ),
+      },
+    },
+    clearScreen: false,
+    logLevel: "error",
+  }
+}

packages/admin-ui/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./format-base"
+export * from "./get-custom-vite-config"