feat(dashboard,admin-sdk,admin-shared,admin-vite-plugin): Add support for UI extensions (#7383)

* intial work

* update lock

* add routes and fix HMR of configs

* cleanup

* rm imports

* rm debug from plugin

* address feedback

* address feedback

packages/admin-next/admin-sdk/src/lib/config.ts

@@ -1,3 +1,4 @@
+import { VIRTUAL_MODULES } from "@medusajs/admin-shared"
 import path from "path"
 import { Config } from "tailwindcss"
 import type { InlineConfig } from "vite"
@@ -10,7 +11,7 @@ export async function getViteConfig(
 ): Promise<InlineConfig> {
   const { searchForWorkspaceRoot } = await import("vite")
   const { default: react } = await import("@vitejs/plugin-react")
-  const { default: inject } = await import("@medusajs/admin-vite-plugin")
+  const { default: medusa } = await import("@medusajs/admin-vite-plugin")
 
   const getPort = await import("get-port")
   const hmrPort = await getPort.default()
@@ -20,7 +21,7 @@ export async function getViteConfig(
   const backendUrl = options.backendUrl ?? ""
 
   return {
-    root: path.resolve(__dirname, "./"),
+    root,
     base: options.path,
     build: {
       emptyOutDir: true,
@@ -28,19 +29,15 @@ export async function getViteConfig(
     },
     optimizeDeps: {
       include: ["@medusajs/dashboard", "react-dom/client"],
+      exclude: VIRTUAL_MODULES,
     },
     define: {
       __BASE__: JSON.stringify(options.path),
       __BACKEND_URL__: JSON.stringify(backendUrl),
     },
     server: {
-      open: true,
       fs: {
-        allow: [
-          searchForWorkspaceRoot(process.cwd()),
-          path.resolve(__dirname, "../../medusa"),
-          path.resolve(__dirname, "../../app"),
-        ],
+        allow: [searchForWorkspaceRoot(process.cwd())],
       },
       hmr: {
         port: hmrPort,
@@ -51,20 +48,22 @@ export async function getViteConfig(
       postcss: {
         plugins: [
           require("tailwindcss")({
-            config: createTailwindConfig(root),
+            config: createTailwindConfig(root, options.sources),
           }),
         ],
       },
     },
-    /**
-     * TODO: Remove polyfills, they are currently only required for the
-     * `axios` dependency in the dashboard. Once we have the new SDK,
-     * we should remove this, and leave it up to the user to include
-     * polyfills if they need them.
-     */
     plugins: [
       react(),
-      inject(),
+      medusa({
+        sources: options.sources,
+      }),
+      /**
+       * TODO: Remove polyfills, they are currently only required for the
+       * `axios` dependency in the dashboard. Once we have the new SDK,
+       * we should remove this, and leave it up to the user to include
+       * polyfills if they need them.
+       */
       nodePolyfills({
         include: ["crypto", "util", "stream"],
       }),
@@ -72,7 +71,7 @@ export async function getViteConfig(
   }
 }
 
-function createTailwindConfig(entry: string) {
+function createTailwindConfig(entry: string, sources: string[] = []) {
   const root = path.join(entry, "**/*.{js,ts,jsx,tsx}")
   const html = path.join(entry, "index.html")
 
@@ -98,9 +97,11 @@ function createTailwindConfig(entry: string) {
     // ignore
   }
 
+  const extensions = sources.map((s) => path.join(s, "**/*.{js,ts,jsx,tsx}"))
+
   const config: Config = {
     presets: [require("@medusajs/ui-preset")],
-    content: [html, root, dashboard, ui],
+    content: [html, root, dashboard, ui, ...extensions],
     darkMode: "class",
   }