feat(dashboard,admin-vite-plugin,admin-bundler,admin-sdk): Rework admin extensions and introduce custom fields API (#9338)

2024-10-09 11:44:40 +00:00
parent 35e69d32f2
commit d71343d6ab
159 changed files with 5264 additions and 2224 deletions
@@ -1,9 +1,15 @@
-import App from "@medusajs/dashboard"
-import React from "react"
-import { createRoot } from "react-dom/client"
+import App from "@medusajs/dashboard";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";

-import "./index.css"
+ReactDOM.createRoot(document.getElementById("medusa")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

-const container = document.getElementById("root")
-const root = createRoot(container!)
-root.render(<App />)
+
+if (import.meta.hot) {
+    import.meta.hot.accept()
+}
@@ -1,13 +1,16 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, user-scalable=no"
+    />
    <link rel="icon" href="data:," data-placeholder-favicon />
  </head>

  <body>
-    <div id="root"></div>
+    <div id="medusa"></div>
    <script type="module" src="./entry.tsx"></script>
  </body>
-</html>
+</html>
@@ -28,8 +28,8 @@ export async function getViteConfig(
      outDir: path.resolve(process.cwd(), options.outDir),
    },
    optimizeDeps: {
-      include: ["@medusajs/dashboard", "react-dom/client"],
-      exclude: VIRTUAL_MODULES,
+      include: ["react-dom/client", "@medusajs/ui", "@medusajs/dashboard"],
+      exclude: [...VIRTUAL_MODULES],
    },
    define: {
      __BASE__: JSON.stringify(options.path),
@@ -43,7 +43,6 @@ export async function getViteConfig(
      hmr: {
        port: hmrPort,
      },
-      middlewareMode: true,
    },
    css: {
      postcss: {
@@ -64,7 +63,6 @@ export async function getViteConfig(

  if (options.vite) {
    const customConfig = options.vite(baseConfig)
-
    return mergeConfig(baseConfig, customConfig)
  }

@@ -1,11 +1,72 @@
-import express from "express"
-import type { InlineConfig } from "vite"
+import express, { RequestHandler } from "express"
+import fs from "fs"
+import path from "path"
+import type { InlineConfig, ViteDevServer } from "vite"

 import { BundlerOptions } from "../types"
 import { getViteConfig } from "./config"

 const router = express.Router()

+function findTemplateFilePath(
+  reqPath: string,
+  root: string
+): string | undefined {
+  if (reqPath.endsWith(".html")) {
+    const pathToTest = path.join(root, reqPath)
+    if (fs.existsSync(pathToTest)) {
+      return pathToTest
+    }
+  }
+
+  const basePath = reqPath.slice(0, reqPath.lastIndexOf("/"))
+  const dirs = basePath.split("/")
+
+  while (dirs.length > 0) {
+    const pathToTest = path.join(root, ...dirs, "index.html")
+    if (fs.existsSync(pathToTest)) {
+      return pathToTest
+    }
+    dirs.pop()
+  }
+
+  return undefined
+}
+
+async function injectViteMiddleware(
+  router: express.Router,
+  middleware: RequestHandler
+) {
+  router.use((req, res, next) => {
+    req.path.endsWith(".html") ? next() : middleware(req, res, next)
+  })
+}
+
+async function injectHtmlMiddleware(
+  router: express.Router,
+  server: ViteDevServer
+) {
+  router.use(async (req, res, next) => {
+    if (req.method !== "GET") {
+      return next()
+    }
+
+    const templateFilePath = findTemplateFilePath(req.path, server.config.root)
+    if (!templateFilePath) {
+      return next()
+    }
+
+    const template = fs.readFileSync(templateFilePath, "utf8")
+    const html = await server.transformIndexHtml(
+      templateFilePath,
+      template,
+      req.originalUrl
+    )
+
+    res.send(html)
+  })
+}
+
 export async function develop(options: BundlerOptions) {
  const vite = await import("vite")

@@ -14,14 +75,18 @@ export async function develop(options: BundlerOptions) {

    const developConfig: InlineConfig = {
      mode: "development",
-      logLevel: "warn",
+      logLevel: "error",
+      appType: "spa",
+      server: {
+        middlewareMode: true,
+      },
    }

-    const server = await vite.createServer(
-      vite.mergeConfig(viteConfig, developConfig)
-    )
+    const mergedConfig = vite.mergeConfig(viteConfig, developConfig)
+    const server = await vite.createServer(mergedConfig)

-    router.use(server.middlewares)
+    await injectViteMiddleware(router, server.middlewares)
+    await injectHtmlMiddleware(router, server)
  } catch (error) {
    console.error(error)
    throw new Error(