feat(admin, admin-ui, medusa-js, medusa-react, medusa): Support Admin Extensions (#4761)

Co-authored-by: Rares Stefan <948623+StephixOne@users.noreply.github.com>
Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>

packages/admin-ui/src/node/actions/build.ts

@@ -0,0 +1,58 @@
+import path from "node:path"
+import webpack, { WebpackError } from "webpack"
+import { BuildArgs } from "../types"
+import { logger } from "../utils"
+import { createCacheDir } from "../utils/create-cache-dir"
+import { getCustomWebpackConfig } from "../webpack"
+
+/**
+ * Builds the admin UI.
+ */
+export async function build({
+  appDir,
+  buildDir,
+  plugins,
+  options,
+  reporting = "fancy",
+}: BuildArgs) {
+  await createCacheDir({ appDir, plugins })
+
+  const cacheDir = path.resolve(appDir, ".cache")
+  const entry = path.resolve(cacheDir, "admin", "src", "main.tsx")
+  const dest = path.resolve(appDir, buildDir)
+  const env = "production"
+
+  const config = await getCustomWebpackConfig(appDir, {
+    entry,
+    dest,
+    cacheDir,
+    env,
+    options,
+    reporting,
+  })
+
+  const compiler = webpack(config)
+
+  return new Promise((resolve, reject) => {
+    compiler.run((err: WebpackError, stats) => {
+      if (err) {
+        if (err.details) {
+          logger.error(err.details)
+        }
+
+        reject(err)
+      }
+
+      const info = stats.toJson()
+
+      if (stats.hasErrors()) {
+        logger.error(JSON.stringify(info.errors))
+      }
+
+      return resolve({
+        stats,
+        warnings: info.warnings,
+      })
+    })
+  })
+}

packages/admin-ui/src/node/actions/clean.ts

@@ -0,0 +1,18 @@
+import fse from "fs-extra"
+import path from "node:path"
+
+type CleanArgs = {
+  appDir: string
+  outDir: string
+}
+
+/**
+ * Cleans the build directory and cache directory.
+ */
+export async function clean({ appDir, outDir }: CleanArgs) {
+  const cacheDir = path.resolve(appDir, ".cache", "admin")
+  const buildDir = path.resolve(appDir, outDir)
+
+  await fse.remove(buildDir)
+  await fse.remove(cacheDir)
+}

packages/admin-ui/src/node/actions/develop.ts

@@ -0,0 +1,103 @@
+import path from "node:path"
+import openBrowser from "react-dev-utils/openBrowser"
+import webpack from "webpack"
+import WebpackDevDerver, {
+  Configuration as DevServerConfiguration,
+} from "webpack-dev-server"
+
+import { DevelopArgs } from "../types"
+import { logger, watchLocalAdminFolder } from "../utils"
+import { createCacheDir } from "../utils/create-cache-dir"
+import { getCustomWebpackConfig } from "../webpack"
+
+/**
+ * Starts a development server for the admin UI.
+ */
+export async function develop({
+  appDir,
+  buildDir,
+  plugins,
+  options = {
+    path: "/",
+    backend: "http://localhost:9000",
+    develop: {
+      open: true,
+      port: 7001,
+      logLevel: "error",
+      stats: "normal",
+    },
+  },
+}: DevelopArgs) {
+  const { cacheDir } = await createCacheDir({
+    appDir,
+    plugins,
+  })
+
+  const entry = path.resolve(cacheDir, "admin", "src", "main.tsx")
+  const dest = path.resolve(appDir, buildDir)
+  const env = "development"
+
+  const config = await getCustomWebpackConfig(appDir, {
+    entry,
+    dest,
+    cacheDir,
+    env,
+    options,
+  })
+
+  const compiler = webpack({
+    ...config,
+    infrastructureLogging: { level: options.develop.logLevel },
+    stats: options.develop.stats === "normal" ? "errors-only" : undefined,
+  })
+
+  const devServerArgs: DevServerConfiguration = {
+    port: options.develop.port,
+    client: {
+      logging: "none",
+      overlay: {
+        errors: true,
+        warnings: false,
+      },
+    },
+    open: false,
+    onListening: options.develop.open
+      ? function (devServer) {
+          if (!devServer) {
+            logger.warn("Failed to open browser.")
+          }
+
+          openBrowser(
+            `http://localhost:${options.develop.port}${
+              options.path ? options.path : ""
+            }`
+          )
+        }
+      : undefined,
+    devMiddleware: {
+      publicPath: options.path,
+      stats: options.develop.stats === "normal" ? false : undefined,
+    },
+    historyApiFallback: {
+      index: options.path,
+      disableDotRule: true,
+    },
+    hot: true,
+  }
+
+  const server = new WebpackDevDerver(devServerArgs, compiler)
+
+  const runServer = async () => {
+    logger.info(
+      `Started development server on http://localhost:${options.develop.port}${
+        options.path ? options.path : ""
+      }`
+    )
+
+    await server.start()
+  }
+
+  await runServer()
+
+  await watchLocalAdminFolder(appDir, cacheDir, plugins)
+}

packages/admin-ui/src/node/actions/index.ts

@@ -0,0 +1,5 @@
+import { build } from "./build"
+import { clean } from "./clean"
+import { develop } from "./develop"
+
+export { clean, build, develop }