asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
* intial work

* update lock

* add routes and fix HMR of configs

* cleanup

* rm imports

* rm debug from plugin

* address feedback

* address feedback
This commit is contained in:
Kasper Fabricius Kristensen
2024-05-23 14:02:19 +02:00
committed by GitHub
parent 521c252dee
commit f1176a0673
50 changed files with 1366 additions and 1098 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@@ -84,6 +84,7 @@ module.exports = {
"./packages/admin-next/dashboard/tsconfig.json",
"./packages/admin-next/admin-sdk/tsconfig.json",
"./packages/admin-next/admin-shared/tsconfig.json",
"./packages/admin-next/admin-vite-plugin/tsconfig.json",
"./packages/inventory/tsconfig.spec.json",

3
packages/admin-next/admin-sdk/package.json
View File

@@ -15,20 +15,19 @@
"devDependencies": {
"@medusajs/types": "^1.11.16",
"@types/compression": "^1.7.5",
"@types/connect-history-api-fallback": "^1.5.4",
"copyfiles": "^2.4.1",
"express": "^4.18.2",
"tsup": "^8.0.1",
"typescript": "^5.3.3"
},
"dependencies": {
"@medusajs/admin-shared": "0.0.1",
"@medusajs/admin-vite-plugin": "0.0.1",
"@medusajs/dashboard": "0.0.1",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.16",
"commander": "^11.1.0",
"compression": "^1.7.4",
"connect-history-api-fallback": "^2.0.0",
"deepmerge": "^4.3.1",
"glob": "^7.1.6",
"postcss": "^8.4.32",

4
packages/admin-next/admin-sdk/src/index.ts
View File

@@ -1,5 +1,9 @@
import { defineRouteConfig, defineWidgetConfig } from "@medusajs/admin-shared"
export { build } from "./lib/build"
export { develop } from "./lib/develop"
export { serve } from "./lib/serve"
export { defineRouteConfig, defineWidgetConfig }
export * from "./types"

14
packages/admin-next/admin-sdk/src/lib/build.ts
View File

@@ -1,3 +1,4 @@
import type { InlineConfig } from "vite"
import { BundlerOptions } from "../types"
import { getViteConfig } from "./config"
@@ -5,13 +6,10 @@ export async function build(options: BundlerOptions) {
const vite = await import("vite")
const viteConfig = await getViteConfig(options)
const buildConfig: InlineConfig = {
mode: "production",
logLevel: "error",
}
try {
await vite.build(
vite.mergeConfig(viteConfig, { mode: "production", logLevel: "silent" })
)
} catch (error) {
console.error(error)
throw new Error("Failed to build admin panel")
}
await vite.build(vite.mergeConfig(viteConfig, buildConfig))
}

29
packages/admin-next/admin-sdk/src/lib/config.ts
View File

@@ -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),
}),
],
},
},
plugins: [
react(),
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.
*/
plugins: [
react(),
inject(),
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",
}

13
packages/admin-next/admin-sdk/src/lib/develop.ts
View File

@@ -1,4 +1,5 @@
import express from "express"
import type { InlineConfig } from "vite"
import { BundlerOptions } from "../types"
import { getViteConfig } from "./config"
@@ -10,14 +11,22 @@ export async function develop(options: BundlerOptions) {
try {
const viteConfig = await getViteConfig(options)
const developConfig: InlineConfig = {
mode: "development",
logLevel: "warn",
}
const server = await vite.createServer(
vite.mergeConfig(viteConfig, { logLevel: "info", mode: "development" })
vite.mergeConfig(viteConfig, developConfig)
)
router.use(server.middlewares)
} catch (error) {
console.error(error)
throw new Error("Could not start development server")
throw new Error(
"Failed to start admin development server. See error above."
)
}
return router

5
packages/admin-next/admin-sdk/src/lib/serve.ts
View File

@@ -1,3 +1,4 @@
import compression from "compression"
import { Request, Response, Router, static as static_ } from "express"
import fs from "fs"
import { ServerResponse } from "http"
@@ -24,7 +25,7 @@ export async function serve(options: ServeOptions) {
if (!indexExists) {
throw new Error(
`Could not find the admin UI build files. Please run \`npm run build\` or \`yarn build\` command and try again.`
`Could not find index.html in the admin build directory. Make sure to run 'medusa build' before starting the server.`
)
}
@@ -41,6 +42,8 @@ export async function serve(options: ServeOptions) {
res.setHeader("Vary", "Origin, Cache-Control")
}
router.use(compression())
router.get("/", sendHtml)
router.use(
static_(options.outDir, {

4
packages/admin-next/admin-sdk/src/types.ts
View File

@@ -1,4 +1,6 @@
import { AdminOptions } from "@medusajs/types"
export type BundlerOptions = Required<Pick<AdminOptions, "outDir" | "path">> &
Pick<AdminOptions, "vite" | "backendUrl">
Pick<AdminOptions, "vite" | "backendUrl"> & {
sources?: string[]
}

2
packages/admin-next/admin-sdk/tsconfig.json
View File

@@ -17,5 +17,5 @@
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"exclude": ["tsup.config.ts", "node_modules", "dist"]
"exclude": ["tsup.config.cjs", "node_modules", "dist"]
}

0
packages/admin-next/admin-sdk/tsup.config.ts → packages/admin-next/admin-sdk/tsup.config.cjs
View File

5
packages/admin-next/admin-shared/package.json
View File

@@ -5,14 +5,17 @@
"author": "Kasper Kristensen <kasper@medusajs.com>",
"types": "dist/index.d.ts",
"main": "dist/index.js",
"module": "dist/index.mjs",
"files": [
"dist",
"package.json"
],
"scripts": {
"build": "tsc"
"build": "tsup"
},
"devDependencies": {
"@types/react": "^18.3.2",
"tsup": "^8.0.2",
"typescript": "^5.3.3"
},
"packageManager": "yarn@3.2.1"

2
packages/admin-next/admin-shared/src/extensions/config/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from "./types"
export * from "./utils"

12
packages/admin-next/admin-shared/src/extensions/config/types.ts Normal file
View File

@@ -0,0 +1,12 @@
import type { ComponentType } from "react"
import { InjectionZone } from "../widgets"
export type WidgetConfig = {
zone: InjectionZone | InjectionZone[]
}
export type RouteConfig = {
label?: string
icon?: ComponentType
}

37
packages/admin-next/admin-shared/src/extensions/config/utils.ts Normal file
View File

@@ -0,0 +1,37 @@
import { RouteConfig, WidgetConfig } from "./types"
function createConfigHelper<TConfig extends Record<string, unknown>>(
config: TConfig
): TConfig {
return {
...config,
/**
* This property is required to allow the config to be exported,
* while still allowing HMR to work correctly.
*
* It tricks Fast Refresh into thinking that the config is a React component,
* which allows it to be updated without a full page reload.
*/
$$typeof: Symbol.for("react.memo"),
}
}
/**
* Define a widget configuration.
*
* @param config The widget configuration.
* @returns The widget configuration.
*/
export function defineWidgetConfig(config: WidgetConfig) {
return createConfigHelper(config)
}
/**
* Define a route configuration.
*
* @param config The route configuration.
* @returns The route configuration.
*/
export function defineRouteConfig(config: RouteConfig) {
return createConfigHelper(config)
}

1
packages/admin-next/admin-shared/src/extensions/routes/constants.ts Normal file
View File

@@ -0,0 +1 @@
export const ROUTE_IMPORTS = ["routes/pages", "routes/links"] as const

2
packages/admin-next/admin-shared/src/extensions/routes/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from "./constants"
export * from "./types"

3
packages/admin-next/admin-shared/src/extensions/routes/types.ts Normal file
View File

@@ -0,0 +1,3 @@
import { ROUTE_IMPORTS } from "./constants"
export type RouteImport = (typeof ROUTE_IMPORTS)[number]

40
packages/admin-next/admin-shared/src/extensions/virtual/constants.ts Normal file
View File

@@ -0,0 +1,40 @@
import { ROUTE_IMPORTS } from "../routes"
import { INJECTION_ZONES } from "../widgets"
import { getVirtualId, getWidgetImport, resolveVirtualId } from "./utils"
const VIRTUAL_WIDGET_MODULES = INJECTION_ZONES.map((zone) => {
return getVirtualId(getWidgetImport(zone))
})
const VIRTUAL_ROUTE_MODULES = ROUTE_IMPORTS.map((route) => {
return getVirtualId(route)
})
/**
* All virtual modules that are used in the admin panel. Virtual modules are used
* to inject custom widgets, routes and settings. A virtual module is imported using
* a string that corresponds to the id of the virtual module.
*
* @example
* ```ts
* import ProductDetailsBefore from "virtual:medusa/widgets/product/details/before"
* ```
*/
export const VIRTUAL_MODULES = [
...VIRTUAL_WIDGET_MODULES,
...VIRTUAL_ROUTE_MODULES,
]
/**
* Reolved paths to all virtual widget modules.
*/
export const RESOLVED_WIDGET_MODULES = VIRTUAL_WIDGET_MODULES.map((id) => {
return resolveVirtualId(id)
})
/**
* Reolved paths to all virtual route modules.
*/
export const RESOLVED_ROUTE_MODULES = VIRTUAL_ROUTE_MODULES.map((id) => {
return resolveVirtualId(id)
})

2
packages/admin-next/admin-shared/src/extensions/virtual/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from "./constants"
export * from "./utils"

25
packages/admin-next/admin-shared/src/extensions/virtual/utils.ts Normal file
View File

@@ -0,0 +1,25 @@
import { InjectionZone } from "../widgets"
const PREFIX = "virtual:medusa/"
export const getVirtualId = (name: string) => {
return `${PREFIX}${name}`
}
export const resolveVirtualId = (id: string) => {
return `\0${id}`
}
export const getWidgetImport = (zone: InjectionZone) => {
return `widgets/${zone.replace(/\./g, "/")}`
}
export const getWidgetZone = (resolvedId: string): InjectionZone => {
const virtualPrefix = `\0${PREFIX}widgets/`
const zone = resolvedId
.replace(virtualPrefix, "")
.replace(/\//g, ".") as InjectionZone
return zone as InjectionZone
}

67
packages/admin-next/admin-shared/src/constants.ts → packages/admin-next/admin-shared/src/extensions/widgets/constants.ts
View File

@@ -1,64 +1,101 @@
export const injectionZones = [
// Order injection zones
const ORDER_INJECTION_ZONES = [
"order.details.before",
"order.details.after",
"order.list.before",
"order.list.after",
// Draft order injection zones
] as const
const DRAFT_ORDER_INJECTION_ZONES = [
"draft_order.list.before",
"draft_order.list.after",
"draft_order.details.before",
"draft_order.details.after",
// Customer injection zones
] as const
const CUSTOMER_INJECTION_ZONES = [
"customer.details.before",
"customer.details.after",
"customer.list.before",
"customer.list.after",
// Customer group injection zones
] as const
const CUSTOMER_GROUP_INJECTION_ZONES = [
"customer_group.details.before",
"customer_group.details.after",
"customer_group.list.before",
"customer_group.list.after",
// Product injection zones
] as const
const PRODUCT_INJECTION_ZONES = [
"product.details.before",
"product.details.after",
"product.list.before",
"product.list.after",
"product.details.side.before",
"product.details.side.after",
// Product collection injection zones
] as const
const PRODUCT_COLLECTION_INJECTION_ZONES = [
"product_collection.details.before",
"product_collection.details.after",
"product_collection.list.before",
"product_collection.list.after",
// Product category injection zones
] as const
const PRODUCT_CATEGORY_INJECTION_ZONES = [
"product_category.details.before",
"product_category.details.after",
"product_category.list.before",
"product_category.list.after",
// Price list injection zones
] as const
const PRICE_LIST_INJECTION_ZONES = [
"price_list.details.before",
"price_list.details.after",
"price_list.list.before",
"price_list.list.after",
// Discount injection zones
] as const
const DISCOUNT_INJECTION_ZONES = [
"discount.details.before",
"discount.details.after",
"discount.list.before",
"discount.list.after",
// Promotion injection zones
] as const
const PROMOTION_INJECTION_ZONES = [
"promotion.details.before",
"promotion.details.after",
"promotion.list.before",
"promotion.list.after",
// Gift card injection zones
] as const
const GIFT_CARD_INJECTION_ZONES = [
"gift_card.details.before",
"gift_card.details.after",
"gift_card.list.before",
"gift_card.list.after",
"custom_gift_card.before",
"custom_gift_card.after",
// Login
"login.before",
"login.after",
] as const
const LOGIN_INJECTION_ZONES = ["login.before", "login.after"] as const
/**
* All valid injection zones in the admin panel. An injection zone is a specific place
* in the admin panel where a plugin can inject custom widgets.
*/
export const INJECTION_ZONES = [
...ORDER_INJECTION_ZONES,
...DRAFT_ORDER_INJECTION_ZONES,
...CUSTOMER_INJECTION_ZONES,
...CUSTOMER_GROUP_INJECTION_ZONES,
...PRODUCT_INJECTION_ZONES,
...PRODUCT_COLLECTION_INJECTION_ZONES,
...PRODUCT_CATEGORY_INJECTION_ZONES,
...PRICE_LIST_INJECTION_ZONES,
...DISCOUNT_INJECTION_ZONES,
...PROMOTION_INJECTION_ZONES,
...GIFT_CARD_INJECTION_ZONES,
...LOGIN_INJECTION_ZONES,
] as const

3
packages/admin-next/admin-shared/src/extensions/widgets/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export * from "./constants"
export * from "./types"
export * from "./utils"

3
packages/admin-next/admin-shared/src/extensions/widgets/types.ts Normal file
View File

@@ -0,0 +1,3 @@
import { INJECTION_ZONES } from "./constants"
export type InjectionZone = (typeof INJECTION_ZONES)[number]

9
packages/admin-next/admin-shared/src/extensions/widgets/utils.ts Normal file
View File

@@ -0,0 +1,9 @@
import { INJECTION_ZONES } from "./constants"
import { InjectionZone } from "./types"
/**
* Validates that the provided zone is a valid injection zone for a widget.
*/
export function isValidInjectionZone(zone: any): zone is InjectionZone {
return INJECTION_ZONES.includes(zone)
}

5
packages/admin-next/admin-shared/src/index.ts
View File

@@ -1,2 +1,3 @@
export * from "./constants"
export * from "./types"
export * from "./extensions/config"
export * from "./extensions/virtual"
export * from "./extensions/widgets"

3
packages/admin-next/admin-shared/src/types.ts
View File

@@ -1,3 +0,0 @@
import { injectionZones } from "./constants"
export type InjectionZone = (typeof injectionZones)[number]

1
packages/admin-next/admin-vite-plugin/tsup.config.ts → packages/admin-next/admin-shared/tsup.config.cjs
View File

@@ -4,4 +4,5 @@ export default defineConfig({
entry: ["./src/index.ts"],
format: ["cjs", "esm"],
dts: true,
clean: true,
})

10
packages/admin-next/admin-vite-plugin/package.json
View File

@@ -2,12 +2,13 @@
"name": "@medusajs/admin-vite-plugin",
"version": "0.0.1",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.js"
"require": "./dist/index.js",
"types": "./dist/index.d.ts"
}
},
"files": [
@@ -15,11 +16,11 @@
"package.json"
],
"scripts": {
"build": "tsup"
"build": "tsup",
"watch": "tsup --watch"
},
"devDependencies": {
"@babel/types": "7.22.5",
"@medusajs/admin-shared": "0.0.1",
"@types/babel__traverse": "7.20.5",
"@types/node": "^20.10.4",
"tsup": "8.0.1",
@@ -32,6 +33,7 @@
"dependencies": {
"@babel/parser": "7.23.5",
"@babel/traverse": "7.23.5",
"@medusajs/admin-shared": "0.0.1",
"chokidar": "3.5.3",
"fdir": "6.1.1",
"magic-string": "0.30.5"

32
packages/admin-next/admin-vite-plugin/src/babel.ts Normal file
View File

@@ -0,0 +1,32 @@
import { parse, type ParseResult, type ParserOptions } from "@babel/parser"
import _traverse, { type NodePath } from "@babel/traverse"
import {
ExportDefaultDeclaration,
ExportNamedDeclaration,
File,
ObjectProperty,
} from "@babel/types"
/**
* Depending on whether we are running the CJS or ESM build of the plugin, we
* need to import the default export of the `@babel/traverse` package in
* different ways.
*/
let traverse: typeof _traverse
if (typeof _traverse === "function") {
traverse = _traverse
} else {
traverse = (_traverse as any).default
}
export { parse, traverse }
export type {
ExportDefaultDeclaration,
ExportNamedDeclaration,
File,
NodePath,
ObjectProperty,
ParseResult,
ParserOptions,
}

887
packages/admin-next/admin-vite-plugin/src/index.ts
View File

@@ -1,885 +1,4 @@
import { ParseResult, ParserOptions, parse } from "@babel/parser"
import _traverse, { NodePath } from "@babel/traverse"
import {
ExportDefaultDeclaration,
ExportNamedDeclaration,
File,
ObjectExpression,
ObjectProperty,
} from "@babel/types"
import chokidar from "chokidar"
import { fdir } from "fdir"
import fs from "fs/promises"
import MagicString from "magic-string"
import path from "path"
import { Logger, PluginOption, ViteDevServer } from "vite"
import { medusaVitePlugin, type MedusaVitePlugin } from "./plugin"
import { InjectionZone, injectionZones } from "@medusajs/admin-shared"
const traverse = (_traverse as any).default as typeof _traverse
const VIRTUAL_PREFIX = "/@virtual/medusajs-admin-vite-plugin/"
const IMPORT_PREFIX = "medusa-admin:"
const WIDGET_MODULE = `${IMPORT_PREFIX}widgets/`
const WIDGET_MODULES = injectionZones.map((zone) => {
return `${WIDGET_MODULE}${zone.replace(/\./g, "/")}`
})
const ROUTE_PAGE_MODULE = `${IMPORT_PREFIX}routes/pages`
const ROUTE_LINK_MODULE = `${IMPORT_PREFIX}routes/links`
const ROUTE_MODULES = [ROUTE_PAGE_MODULE, ROUTE_LINK_MODULE]
const SETTING_PAGE_MODULE = `${IMPORT_PREFIX}settings/pages`
const SETTING_CARD_MODULE = `${IMPORT_PREFIX}settings/cards`
const SETTING_MODULE = [SETTING_PAGE_MODULE, SETTING_CARD_MODULE]
const MODULES = [...WIDGET_MODULES, ...ROUTE_MODULES, ...SETTING_MODULE]
type InjectArgs = {
sources?: string[]
}
type LoadModuleOptions =
| { type: "widget"; get: InjectionZone }
| { type: "route"; get: "page" | "link" }
| { type: "setting"; get: "page" | "card" }
export default function inject(args?: InjectArgs): PluginOption {
const _extensionGraph = new Map<string, Set<string>>()
const _sources = new Set<string>([...(args?.sources || [])])
let server: ViteDevServer
let watcher: chokidar.FSWatcher
let logger: Logger
/**
* Traverses the directory and returns all files that ends with .tsx or .jsx,
* excluding files in subdirectories that starts with _.
*
* @param dir - The directory to traverse
* @param file - The file name to filter by without extension
* @param depth - The depth of the files to return
*/
async function traverseDirectory(
dir: string,
file?: string,
depth?: { min: number; max?: number }
) {
const baseDepth = dir.split(path.sep).length
const crawler = new fdir()
.withBasePath()
.exclude((dirName) => dirName.startsWith("_"))
.filter((path) => path.endsWith(".tsx") || path.endsWith(".jsx"))
if (file) {
crawler.filter(
(path) => path.endsWith(`${file}.tsx`) || path.endsWith(`${file}.jsx`)
)
}
if (depth) {
crawler.filter((file) => {
const directoryDepth = file.split(path.sep).length - 1
if (depth.max && directoryDepth > baseDepth + depth.max) {
return false
}
if (directoryDepth < baseDepth + depth.min) {
return false
}
return true
})
}
return await crawler.crawl(dir).withPromise()
}
/**
* Generates a module with a source map from a code string
*/
function generateModule(code: string) {
const magicString = new MagicString(code)
return {
code: magicString.toString(),
map: magicString.generateMap({ hires: true }),
}
}
/**
* Validates that the default export of a file is a JSX component
*/
function validateDefaultExport(
path: NodePath<ExportDefaultDeclaration>,
ast: ParseResult<File>
) {
let hasComponentExport = false
const declaration = path.node.declaration
if (
declaration &&
(declaration.type === "Identifier" ||
declaration.type === "FunctionDeclaration")
) {
const exportName =
declaration.type === "Identifier"
? declaration.name
: declaration.id && declaration.id.name
if (exportName) {
try {
traverse(ast, {
VariableDeclarator({ node, scope }) {
let isDefaultExport = false
if (
node.id.type === "Identifier" &&
node.id.name === exportName
) {
isDefaultExport = true
}
if (!isDefaultExport) {
return
}
traverse(
node,
{
ReturnStatement(path) {
if (
path.node.argument?.type === "JSXElement" ||
path.node.argument?.type === "JSXFragment"
) {
hasComponentExport = true
}
},
},
scope
)
},
})
} catch (e) {
console.error(
`An error occured while validating the default export of '${path}'. The following error must be resolved before continuing:\n${e}`
)
return false
}
}
}
return hasComponentExport
}
/**
* Gets the properties of the config object in an extension file
*/
function getProperties(path: NodePath<ExportNamedDeclaration>) {
const declaration = path.node.declaration
if (declaration && declaration.type === "VariableDeclaration") {
const configDeclaration = declaration.declarations.find(
(d) =>
d.type === "VariableDeclarator" &&
d.id.type === "Identifier" &&
d.id.name === "config"
)
if (
configDeclaration &&
configDeclaration.init?.type === "ObjectExpression"
) {
return configDeclaration.init.properties
}
}
return null
}
/**
* Validates that the provided zone is a valid injection zone for a widget
*/
function validateInjectionZone(zone: any): zone is InjectionZone {
return injectionZones.includes(zone)
}
function validateWidgetConfig(
path: NodePath<ExportNamedDeclaration>,
zone?: InjectionZone
) {
const properties = getProperties(path)
if (!properties) {
return { zoneIsValid: false, zoneValue: undefined }
}
const zoneProperty = properties.find(
(p) =>
p.type === "ObjectProperty" &&
p.key.type === "Identifier" &&
p.key.name === "zone"
) as ObjectProperty | undefined
if (!zoneProperty) {
return { zoneIsValid: false, zoneValue: undefined }
}
let zoneIsValid = false
let zoneValue: string | string[] | undefined = undefined
if (zoneProperty.value.type === "StringLiteral") {
zoneIsValid = !zone
? validateInjectionZone(zoneProperty.value.value)
: zone === zoneProperty.value.value
zoneValue = zoneProperty.value.value
} else if (zoneProperty.value.type === "ArrayExpression") {
zoneIsValid = zoneProperty.value.elements.every((_zone) => {
if (!_zone || _zone.type !== "StringLiteral") {
return false
}
const isZoneMatch = !zone ? true : zone === _zone.value
return validateInjectionZone(_zone.value) && isZoneMatch
})
zoneValue = zoneProperty.value.elements
.map((e) => {
if (e && e.type === "StringLiteral") {
return e.value
}
})
.filter(Boolean) as string[]
}
return { zoneIsValid, zoneValue }
}
async function validateWidget(file: string, zone?: InjectionZone) {
const content = await fs.readFile(file, "utf-8")
const parserOptions: ParserOptions = {
sourceType: "module",
plugins: ["jsx"],
}
if (file.endsWith(".tsx")) {
parserOptions.plugins?.push("typescript")
}
let ast: ParseResult<File>
try {
ast = parse(content, parserOptions)
} catch (err) {
logger.error(
`An error occured while parsing the content of ${file}:\n${err}`,
{
error: err as Error,
timestamp: true,
}
)
return { isValidWidget: false, zoneValue: undefined }
}
let hasDefaultExport = false
let hasNamedExport = false
let zoneValue: string | string[] | undefined
try {
traverse(ast, {
ExportDefaultDeclaration(path) {
hasDefaultExport = validateDefaultExport(path, ast)
},
ExportNamedDeclaration(path) {
const { zoneIsValid, zoneValue: value } = validateWidgetConfig(
path,
zone
)
hasNamedExport = zoneIsValid
zoneValue = value
},
})
} catch (err) {
logger.error(`An error occured while validating the content of ${file}`, {
error: err as Error,
timestamp: true,
})
return { isValidWidget: false, zoneValue: undefined }
}
return { isValidWidget: hasDefaultExport && hasNamedExport, zoneValue }
}
async function generateWidgetEntrypoint(zone: InjectionZone) {
const files = (
await Promise.all(
Array.from(_sources).map(async (source) =>
traverseDirectory(`${source}/widgets`)
)
)
).flat()
const validatedWidgets = (
await Promise.all(
files.map(async (widget) => {
const { isValidWidget } = await validateWidget(widget, zone)
return isValidWidget ? widget : null
})
)
).filter(Boolean) as string[]
if (!validatedWidgets.length) {
const code = `export default {
widgets: [],
}`
return { module: generateModule(code), paths: [] }
}
const importString = validatedWidgets
.map((path, index) => `import WidgetExt${index} from "${path}";`)
.join("\n")
const exportString = `export default {
widgets: [${validatedWidgets
.map((_, index) => `{ Component: WidgetExt${index} }`)
.join(", ")}],
}`
const code = `${importString}\n${exportString}`
return { module: generateModule(code), paths: validatedWidgets }
}
function validateRouteConfig(
path: NodePath<ExportNamedDeclaration>,
requireLink: boolean
) {
const properties = getProperties(path)
if (!properties) {
return false
}
const linkProperty = properties.find(
(p) =>
p.type === "ObjectProperty" &&
p.key.type === "Identifier" &&
p.key.name === "link"
) as ObjectProperty | undefined
/**
* Link is optional unless requireLink is true.
*/
if (!linkProperty && !requireLink) {
return true
}
const linkValue = linkProperty?.value as ObjectExpression | undefined
if (!linkValue) {
return false
}
let labelIsValid = false
if (
linkValue.properties.some(
(p) =>
p.type === "ObjectProperty" &&
p.key.type === "Identifier" &&
p.key.name === "label" &&
p.value.type === "StringLiteral"
)
) {
labelIsValid = true
}
return labelIsValid
}
async function validateRoute(file: string, requireLink: boolean) {
const content = await fs.readFile(file, "utf-8")
const parserOptions: ParserOptions = {
sourceType: "module",
plugins: ["jsx"],
}
if (file.endsWith(".tsx")) {
parserOptions.plugins?.push("typescript")
}
let ast: ParseResult<File>
try {
ast = parse(content, parserOptions)
} catch (err) {
logger.error("An error occured while validating a route.", {
error: err as Error,
timestamp: true,
})
return false
}
let hasDefaultExport = false
let hasNamedExport = false
try {
traverse(ast, {
ExportDefaultDeclaration(path) {
hasDefaultExport = validateDefaultExport(path, ast)
},
ExportNamedDeclaration(path) {
hasNamedExport = validateRouteConfig(path, requireLink)
},
})
} catch (err) {
logger.error("An error occured while validating a route.", {
error: err as Error,
timestamp: true,
})
return false
}
return hasDefaultExport && hasNamedExport
}
function createPath(file: string) {
return file
.replace(/.*\/admin\/(routes|settings)/, "")
.replace(/\[([^\]]+)\]/g, ":$1")
.replace(/\/page\.(tsx|jsx)/, "")
}
async function generateRouteEntrypoint(get: "page" | "link") {
const files = (
await Promise.all(
Array.from(_sources).map(async (source) =>
traverseDirectory(`${source}/routes`, "page", { min: 1 })
)
)
).flat()
const validatedRoutes = (
await Promise.all(
files.map(async (route) => {
const isValid = await validateRoute(route, get === "link")
return isValid ? route : null
})
)
).filter(Boolean) as string[]
if (!validatedRoutes.length) {
const code = `export default {
${get}s: [],
}`
return { module: generateModule(code), paths: [] }
}
const importString = validatedRoutes
.map((path, index) => {
return get === "page"
? `import RouteExt${index} from "${path}";`
: `import { config as routeConfig${index} } from "${path}";`
})
.join("\n")
const exportString = `export default {
${get}s: [${validatedRoutes
.map((file, index) => {
return get === "page"
? `{ path: "${createPath(file)}", file: "${file}" }`
: `{ path: "${createPath(file)}", ...routeConfig${index}.link }`
})
.join(", ")}],
}`
const code = `${importString}\n${exportString}`
return { module: generateModule(code), paths: validatedRoutes }
}
async function validateSetting(file: string) {
const content = await fs.readFile(file, "utf-8")
const parserOptions: ParserOptions = {
sourceType: "module",
plugins: ["jsx"],
}
if (file.endsWith(".tsx")) {
parserOptions.plugins?.push("typescript")
}
let ast: ParseResult<File>
try {
ast = parse(content, parserOptions)
} catch (err) {
logger.error("An error occured while validating a setting.", {
error: err as Error,
timestamp: true,
})
return false
}
let hasDefaultExport = false
let hasNamedExport = false
try {
traverse(ast, {
ExportDefaultDeclaration(path) {
hasDefaultExport = validateDefaultExport(path, ast)
},
ExportNamedDeclaration(path) {
hasNamedExport = validateSettingConfig(path)
},
})
} catch (err) {
logger.error("An error occured while validating a setting.", {
error: err as Error,
timestamp: true,
})
return false
}
return hasDefaultExport && hasNamedExport
}
function validateSettingConfig(path: NodePath<ExportNamedDeclaration>) {
const properties = getProperties(path)
if (!properties) {
return false
}
const cardProperty = properties.find(
(p) =>
p.type === "ObjectProperty" &&
p.key.type === "Identifier" &&
p.key.name === "card"
) as ObjectProperty | undefined
// Link property is required for settings
if (!cardProperty) {
return false
}
const cardValue = cardProperty.value as ObjectExpression
let hasLabel = false
let hasDescription = false
if (
cardValue.properties.some(
(p) =>
p.type === "ObjectProperty" &&
p.key.type === "Identifier" &&
p.key.name === "label" &&
p.value.type === "StringLiteral"
)
) {
hasLabel = true
}
if (
cardValue.properties.some(
(p) =>
p.type === "ObjectProperty" &&
p.key.type === "Identifier" &&
p.key.name === "description" &&
p.value.type === "StringLiteral"
)
) {
hasDescription = true
}
return hasLabel && hasDescription
}
async function generateSettingEntrypoint(get: "page" | "card") {
const files = (
await Promise.all(
Array.from(_sources).map(async (source) =>
traverseDirectory(`${source}/settings`, "page", { min: 1, max: 1 })
)
)
).flat()
const validatedSettings = (
await Promise.all(
files.map(async (setting) => {
const isValid = await validateSetting(setting)
return isValid ? setting : null
})
)
).filter(Boolean) as string[]
if (!validatedSettings.length) {
const code = `export default {
${get}s: [],
}`
return { module: generateModule(code), paths: [] }
}
const importString = validatedSettings
.map((path, index) => {
return get === "page"
? `import SettingExt${index} from "${path}";`
: `import { config as settingConfig${index} } from "${path}";`
})
.join("\n")
const exportString = `export default {
${get}s: [${validatedSettings
.map((file, index) => {
return get === "page"
? `{ path: "${createPath(file)}", file: "${file}" }`
: `{ path: "${createPath(file)}", ...settingConfig${index}.card }`
})
.join(", ")}],
}`
const code = `${importString}\n${exportString}`
return { module: generateModule(code), paths: validatedSettings }
}
async function loadModule(options: LoadModuleOptions) {
switch (options.type) {
case "widget": {
return await generateWidgetEntrypoint(options.get)
}
case "route": {
return await generateRouteEntrypoint(options.get)
}
case "setting": {
return await generateSettingEntrypoint(options.get)
}
}
}
function getExtensionType(file: string) {
const normalizedPath = path.normalize(file)
if (normalizedPath.includes(path.normalize("/admin/widgets/"))) {
return "widget"
} else if (normalizedPath.includes(path.normalize("/admin/routes/"))) {
return "route"
} else if (normalizedPath.includes(path.normalize("/admin/settings/"))) {
return "setting"
} else {
return "none"
}
}
async function handleWidgetChange(file: string) {
const { isValidWidget, zoneValue } = await validateWidget(file)
if (!isValidWidget || !zoneValue) {
_extensionGraph.delete(file)
return
}
const zoneValues = Array.isArray(zoneValue) ? zoneValue : [zoneValue]
for (const zone of zoneValues) {
const zonePath = zone.replace(/\./g, "/")
const moduleId = `${VIRTUAL_PREFIX}${WIDGET_MODULE}${zonePath}`
const module = server.moduleGraph.getModuleById(moduleId)
if (module) {
await server.reloadModule(module)
}
}
}
async function handleRouteChange(file: string) {
const isValidRoute = await validateRoute(file, false)
if (!isValidRoute) {
_extensionGraph.delete(file)
return
}
for (const moduleId of ROUTE_MODULES) {
const fullModuleId = `${VIRTUAL_PREFIX}${moduleId}`
const module = server.moduleGraph.getModuleById(fullModuleId)
if (module) {
await server.reloadModule(module)
}
}
}
async function handleSettingChange(file: string) {
const isValidSetting = await validateSetting(file)
if (!isValidSetting) {
_extensionGraph.delete(file)
return
}
for (const moduleId of SETTING_MODULE) {
const fullModuleId = `${VIRTUAL_PREFIX}${moduleId}`
const module = server.moduleGraph.getModuleById(fullModuleId)
if (module) {
await server.reloadModule(module)
}
}
}
async function handleExtensionUnlink(file: string) {
const moduleIds = _extensionGraph.get(file)
if (!moduleIds) {
return
}
for (const moduleId of moduleIds) {
const module = server.moduleGraph.getModuleById(moduleId)
if (module) {
_extensionGraph.delete(file)
await server.reloadModule(module)
}
}
}
async function loadModuleAndUpdateGraph(
id: string,
options: LoadModuleOptions
) {
const { module, paths } = await loadModule(options)
for (const path of paths) {
const ids = _extensionGraph.get(path) || new Set<string>()
ids.add(id)
_extensionGraph.set(path, ids)
}
return module
}
return {
name: "@medusajs/admin-vite-plugin",
configureServer(s) {
server = s
logger = s.config.logger
watcher = chokidar.watch(Array.from(_sources), {
persistent: true,
ignoreInitial: true,
})
watcher.on("add", async (file) => {
const type = getExtensionType(file)
if (type === "none") {
return
}
if (type === "widget") {
await handleWidgetChange(file)
return
}
if (type === "route") {
await handleRouteChange(file)
return
}
if (type === "setting") {
await handleSettingChange(file)
return
}
return
})
watcher.on("change", async (file) => {
const type = getExtensionType(file)
if (type === "none") {
return
}
if (type === "widget") {
await handleWidgetChange(file)
return
}
if (type === "route") {
await handleRouteChange(file)
return
}
if (type === "setting") {
await handleSettingChange(file)
return
}
return
})
watcher.on("unlink", async (file) => {
await handleExtensionUnlink(file)
return
})
},
resolveId(id) {
if (MODULES.includes(id)) {
return VIRTUAL_PREFIX + id
}
return null
},
async load(id: string) {
if (!id.startsWith(VIRTUAL_PREFIX)) {
return null
}
const idNoPrefix = id.slice(VIRTUAL_PREFIX.length)
const moduleMap: Record<string, LoadModuleOptions> = {
[ROUTE_PAGE_MODULE]: { type: "route", get: "page" },
[ROUTE_LINK_MODULE]: { type: "route", get: "link" },
[SETTING_PAGE_MODULE]: { type: "setting", get: "page" },
[SETTING_CARD_MODULE]: { type: "setting", get: "card" },
}
if (WIDGET_MODULES.includes(idNoPrefix)) {
const zone = idNoPrefix
.replace(WIDGET_MODULE, "")
.replace(/\//g, ".") as InjectionZone
return loadModuleAndUpdateGraph(id, { type: "widget", get: zone })
}
const moduleOptions = moduleMap[idNoPrefix]
if (moduleOptions) {
return loadModuleAndUpdateGraph(id, moduleOptions)
}
return null
},
async closeBundle() {
if (watcher) {
await watcher.close()
}
},
}
}
export default medusaVitePlugin
export type { MedusaVitePlugin }

794
packages/admin-next/admin-vite-plugin/src/plugin.ts Normal file
View File

@@ -0,0 +1,794 @@
import {
InjectionZone,
RESOLVED_ROUTE_MODULES,
RESOLVED_WIDGET_MODULES,
VIRTUAL_MODULES,
getVirtualId,
getWidgetImport,
getWidgetZone,
isValidInjectionZone,
resolveVirtualId,
} from "@medusajs/admin-shared"
import { fdir } from "fdir"
import fs from "fs/promises"
import MagicString from "magic-string"
import path from "path"
import type * as Vite from "vite"
import {
ExportNamedDeclaration,
ObjectProperty,
parse,
traverse,
type ExportDefaultDeclaration,
type File,
type NodePath,
type ParseResult,
type ParserOptions,
} from "./babel"
const VALID_FILE_EXTENSIONS = [".tsx", ".jsx"]
/**
* Returns the module type of a given file.
*/
function getModuleType(file: string) {
const normalizedPath = path.normalize(file)
if (normalizedPath.includes(path.normalize("/admin/widgets/"))) {
return "widget"
} else if (normalizedPath.includes(path.normalize("/admin/routes/"))) {
return "route"
} else {
return "none"
}
}
/**
* Returns the parser options for a given file.
*/
function getParserOptions(file: string): ParserOptions {
const options: ParserOptions = {
sourceType: "module",
plugins: ["jsx"],
}
if (file.endsWith(".tsx")) {
options.plugins?.push("typescript")
}
return options
}
/**
* Generates a module with a source map from a code string
*/
function generateModule(code: string) {
const magicString = new MagicString(code)
return {
code: magicString.toString(),
map: magicString.generateMap({ hires: true }),
}
}
/**
* Crawls a directory and returns all files that match the criteria.
*/
async function crawl(
dir: string,
file?: string,
depth?: { min: number; max?: number }
) {
const dirDepth = dir.split(path.sep).length
const crawler = new fdir()
.withBasePath()
.exclude((dirName) => dirName.startsWith("_"))
.filter((path) => {
return VALID_FILE_EXTENSIONS.some((ext) => path.endsWith(ext))
})
if (file) {
crawler.filter((path) => {
return VALID_FILE_EXTENSIONS.some((ext) => path.endsWith(file + ext))
})
}
if (depth) {
crawler.filter((file) => {
const pathDepth = file.split(path.sep).length - 1
if (depth.max && pathDepth > dirDepth + depth.max) {
return false
}
if (pathDepth < dirDepth + depth.min) {
return false
}
return true
})
}
return crawler.crawl(dir).withPromise()
}
/**
* Extracts and returns the properties of a `config` object from a named export declaration.
*/
function getConfigObjectProperties(path: NodePath<ExportNamedDeclaration>) {
const declaration = path.node.declaration
if (declaration && declaration.type === "VariableDeclaration") {
const configDeclaration = declaration.declarations.find(
(d) =>
d.type === "VariableDeclarator" &&
d.id.type === "Identifier" &&
d.id.name === "config"
)
if (
configDeclaration &&
configDeclaration.init?.type === "CallExpression" &&
configDeclaration.init.arguments.length > 0 &&
configDeclaration.init.arguments[0].type === "ObjectExpression"
) {
return configDeclaration.init.arguments[0].properties
}
}
return null
}
/**
* Validates if the default export in a given AST is a component (JSX element or fragment).
*/
function isDefaultExportComponent(
path: NodePath<ExportDefaultDeclaration>,
ast: File
): boolean {
let hasComponentExport = false
const declaration = path.node.declaration
if (
declaration &&
(declaration.type === "Identifier" ||
declaration.type === "FunctionDeclaration")
) {
const exportName =
declaration.type === "Identifier"
? declaration.name
: declaration.id && declaration.id.name
if (exportName) {
try {
traverse(ast, {
VariableDeclarator({ node, scope }) {
let isDefaultExport = false
if (node.id.type === "Identifier" && node.id.name === exportName) {
isDefaultExport = true
}
if (!isDefaultExport) {
return
}
traverse(
node,
{
ReturnStatement(path) {
if (
path.node.argument?.type === "JSXElement" ||
path.node.argument?.type === "JSXFragment"
) {
hasComponentExport = true
}
},
},
scope
)
},
})
} catch (e) {
return false
}
}
}
return hasComponentExport
}
/** Widget utilities */
/**
* Validates the widget configuration.
*/
function validateWidgetConfig(
path: NodePath<ExportNamedDeclaration>,
zone?: InjectionZone
): { zoneIsValid: boolean; zoneValue: string | string[] | null } {
let zoneIsValid = false
let zoneValue: string | string[] | null = null
const properties = getConfigObjectProperties(path)
if (!properties) {
return { zoneIsValid, zoneValue }
}
const zoneProperty = properties.find(
(p) =>
p.type === "ObjectProperty" &&
p.key.type === "Identifier" &&
p.key.name === "zone"
) as ObjectProperty | undefined
if (!zoneProperty) {
return { zoneIsValid, zoneValue }
}
if (zoneProperty.value.type === "StringLiteral") {
zoneIsValid = !zone
? isValidInjectionZone(zoneProperty.value.value)
: zone === zoneProperty.value.value
zoneValue = zoneProperty.value.value
} else if (zoneProperty.value.type === "ArrayExpression") {
zoneIsValid = zoneProperty.value.elements.every((e) => {
if (!e || e.type !== "StringLiteral") {
return false
}
const isZoneMatch = !zone ? true : zone === e.value
return isValidInjectionZone(e.value) && isZoneMatch
})
const values: string[] = []
for (const element of zoneProperty.value.elements) {
if (element && element.type === "StringLiteral") {
values.push(element.value)
}
}
zoneValue = values
}
return { zoneIsValid, zoneValue }
}
/**
* Validates a widget file.
*/
async function validateWidget(
file: string,
zone?: InjectionZone
): Promise<
{ valid: true; zone: InjectionZone } | { valid: false; zone: null }
> {
let _zoneValue: string | string[] | null = null
const content = await fs.readFile(file, "utf-8")
const parserOptions = getParserOptions(file)
let ast: ParseResult<File>
try {
ast = parse(content, parserOptions)
} catch (e) {
return { valid: false, zone: _zoneValue }
}
let hasDefaultExport = false
let hasNamedExport = false
try {
traverse(ast, {
ExportDefaultDeclaration(path) {
hasDefaultExport = isDefaultExportComponent(path, ast)
},
ExportNamedDeclaration(path) {
const { zoneIsValid, zoneValue } = validateWidgetConfig(path, zone)
hasNamedExport = zoneIsValid
_zoneValue = zoneValue
},
})
} catch (err) {
return { valid: false, zone: _zoneValue }
}
return { valid: hasNamedExport && hasDefaultExport, zone: _zoneValue as any }
}
async function generateWidgetEntrypoint(
sources: Set<string>,
zone: InjectionZone
) {
const files = (
await Promise.all(
Array.from(sources).map(async (source) => crawl(`${source}/widgets`))
)
).flat()
const validatedWidgets = (
await Promise.all(
files.map(async (widget) => {
const { valid } = await validateWidget(widget, zone)
return valid ? widget : null
})
)
).filter(Boolean) as string[]
if (!validatedWidgets.length) {
const code = `export default {
widgets: [],
}`
return { module: generateModule(code), paths: [] }
}
const importString = validatedWidgets
.map((path, index) => `import WidgetExt${index} from "${path}";`)
.join("\n")
const exportString = `export default {
widgets: [${validatedWidgets
.map((_, index) => `{ Component: WidgetExt${index} }`)
.join(", ")}],
}`
const code = `${importString}\n${exportString}`
return { module: generateModule(code), paths: validatedWidgets }
}
/** Route utilities */
function validateRouteConfig(
path: NodePath<ExportNamedDeclaration>,
resolveMenuItem: boolean
) {
const properties = getConfigObjectProperties(path)
/**
* When resolving links for the sidebar, we a config to get the props needed to
* render the link correctly.
*
* If the user has not provided any config, then the route can never be a valid
* menu item, so we can skip the validation, and return false.
*/
if (!properties && resolveMenuItem) {
return false
}
/**
* A config is not required for a component to be a valid route.
*/
if (!properties) {
return true
}
const labelProperty = properties.find(
(p) =>
p.type === "ObjectProperty" &&
p.key.type === "Identifier" &&
p.key.name === "label"
) as ObjectProperty | undefined
const labelIsValid =
!labelProperty || labelProperty.value.type === "StringLiteral"
return labelIsValid
}
async function validateRoute(file: string, resolveMenuItem = false) {
const content = await fs.readFile(file, "utf-8")
const parserOptions = getParserOptions(file)
let ast: ParseResult<File>
try {
ast = parse(content, parserOptions)
} catch (_e) {
return false
}
let hasDefaultExport = false
let hasNamedExport = resolveMenuItem ? false : true
try {
traverse(ast, {
ExportDefaultDeclaration(path) {
hasDefaultExport = isDefaultExportComponent(path, ast)
},
ExportNamedDeclaration(path) {
hasNamedExport = validateRouteConfig(path, resolveMenuItem)
},
})
} catch (_e) {
return false
}
return hasNamedExport && hasDefaultExport
}
function createRoutePath(file: string) {
return file
.replace(/.*\/admin\/(routes|settings)/, "")
.replace(/\[([^\]]+)\]/g, ":$1")
.replace(/\/page\.(tsx|jsx)/, "")
}
async function generateRouteEntrypoint(
sources: Set<string>,
type: "page" | "link",
base = ""
) {
const files = (
await Promise.all(
Array.from(sources).map(async (source) =>
crawl(`${source}/routes`, "page", { min: 1 })
)
)
).flat()
const validatedRoutes = (
await Promise.all(
files.map(async (route) => {
const valid = await validateRoute(route, type === "link")
return valid ? route : null
})
)
).filter(Boolean) as string[]
if (!validatedRoutes.length) {
const code = `export default {
${type}s: [],
}`
return { module: generateModule(code), paths: [] }
}
const importString = validatedRoutes
.map((path, index) => {
return type === "page"
? `import RouteExt${index} from "${path}";`
: `import { config as routeConfig${index} } from "${path}";`
})
.join("\n")
const exportString = `export default {
${type}s: [${validatedRoutes
.map((file, index) => {
return type === "page"
? `{ path: "${createRoutePath(file)}", file: "${base + file}" }`
: `{ path: "${createRoutePath(file)}", ...routeConfig${index} }`
})
.join(", ")}],
}`
const code = `${importString}\n${exportString}`
return { module: generateModule(code), paths: validatedRoutes }
}
type LoadModuleOptions =
| {
type: "widget"
get: InjectionZone
}
| {
type: "route"
get: "page" | "link"
}
export type MedusaVitePluginOptions = {
/**
* A list of directories to source extensions from.
*/
sources?: string[]
}
export type MedusaVitePlugin = (config?: MedusaVitePluginOptions) => Vite.Plugin
export const medusaVitePlugin: MedusaVitePlugin = (options) => {
const _extensionGraph = new Map<string, Set<string>>()
const _sources = new Set<string>(options?.sources ?? [])
let _base = ""
let server: Vite.ViteDevServer | undefined
let watcher: Vite.FSWatcher | undefined
async function loadModule(options: LoadModuleOptions) {
switch (options.type) {
case "widget": {
return await generateWidgetEntrypoint(_sources, options.get)
}
case "route":
return await generateRouteEntrypoint(_sources, options.get, _base)
default:
return null
}
}
async function register(id: string, options: LoadModuleOptions) {
const result = await loadModule(options)
if (!result) {
return
}
const { module, paths } = result
for (const path of paths) {
const ids = _extensionGraph.get(path) || new Set<string>()
ids.add(id)
_extensionGraph.set(path, ids)
}
return module
}
async function handleWidgetChange(file: string, event: "add" | "change") {
const { valid, zone } = await validateWidget(file)
const zoneValues = Array.isArray(zone) ? zone : [zone]
if (event === "change") {
/**
* If the file is in the extension graph, and it has become
* invalid, we need to remove it from the graph and reload all modules
* that import the widget.
*/
if (!valid) {
const extensionIds = _extensionGraph.get(file)
_extensionGraph.delete(file)
if (!extensionIds) {
return
}
for (const moduleId of extensionIds) {
const module = server?.moduleGraph.getModuleById(moduleId)
if (module) {
await server?.reloadModule(module)
}
}
return
}
/**
* If the file is not in the extension graph, we need to add it.
* We also need to reload all modules that import the widget.
*/
if (!_extensionGraph.has(file)) {
const imports = new Set<string>()
for (const zoneValue of zoneValues) {
const zonePath = getWidgetImport(zoneValue)
const moduleId = getVirtualId(zonePath)
const resolvedModuleId = resolveVirtualId(moduleId)
const module = server?.moduleGraph.getModuleById(resolvedModuleId)
if (module) {
imports.add(resolvedModuleId)
await server?.reloadModule(module)
}
}
_extensionGraph.set(file, imports)
}
}
if (event === "add") {
/**
* If a new file is added in /admin/widgets, but it is not valid,
* we don't need to do anything.
*/
if (!valid) {
return
}
/**
* If a new file is added in /admin/widgets, and it is valid, we need to
* add it to the extension graph and reload all modules that need to import
* the widget so that they can be updated with the new widget.
*/
const imports = new Set<string>()
for (const zoneValue of zoneValues) {
const zonePath = getWidgetImport(zoneValue)
const moduleId = getVirtualId(zonePath)
const resolvedModuleId = resolveVirtualId(moduleId)
const module = server?.moduleGraph.getModuleById(resolvedModuleId)
if (module) {
imports.add(resolvedModuleId)
await server?.reloadModule(module)
}
}
_extensionGraph.set(file, imports)
}
}
async function handleRouteChange(file: string, event: "add" | "change") {
const valid = await validateRoute(file)
if (event === "change") {
/**
* If the file is in the extension graph, and it has become
* invalid, we need to remove it from the graph and reload all modules
* that import the route.
*/
if (!valid) {
const extensionIds = _extensionGraph.get(file)
_extensionGraph.delete(file)
if (!extensionIds) {
return
}
for (const moduleId of extensionIds) {
const module = server?.moduleGraph.getModuleById(moduleId)
if (module) {
await server?.reloadModule(module)
}
}
return
}
/**
* If the file is not in the extension graph, we need to add it.
* We also need to reload all modules that import the route.
*/
if (!_extensionGraph.has(file)) {
const moduleId = getVirtualId(file)
const resolvedModuleId = resolveVirtualId(moduleId)
const module = server?.moduleGraph.getModuleById(resolvedModuleId)
if (module) {
await server?.reloadModule(module)
}
}
if (_extensionGraph.has(file)) {
const modules = _extensionGraph.get(file)
if (!modules) {
return
}
for (const moduleId of modules) {
const module = server?.moduleGraph.getModuleById(moduleId)
if (module) {
await server?.reloadModule(module)
}
}
}
}
if (event === "add") {
/**
* If a new file is added in /admin/routes, but it is not valid,
* we don't need to do anything.
*/
if (!valid) {
return
}
const imports = new Set<string>()
for (const resolvedModuleId of RESOLVED_ROUTE_MODULES) {
const module = server?.moduleGraph.getModuleById(resolvedModuleId)
if (module) {
imports.add(resolvedModuleId)
await server?.reloadModule(module)
}
}
_extensionGraph.set(file, imports)
}
}
async function handleAddOrChange(path: string, event: "add" | "change") {
const type = getModuleType(path)
switch (type) {
case "widget":
await handleWidgetChange(path, event)
break
case "route":
await handleRouteChange(path, event)
break
default:
// In all other cases we don't need to do anything.
break
}
}
async function handleUnlink(path: string) {
const moduleIds = _extensionGraph.get(path)
_extensionGraph.delete(path)
if (!moduleIds) {
return
}
for (const moduleId of moduleIds) {
const module = server?.moduleGraph.getModuleById(moduleId)
if (module) {
await server?.reloadModule(module)
}
}
}
return {
name: "@medusajs/admin-vite-plugin",
enforce: "pre",
configResolved(config) {
if (config.server?.middlewareMode) {
/**
* If we are in middleware mode, we need to set the base to the <base> + "@fs".
*
* This ensures that the page components are lazy-loaded correctly.
*/
_base = `${config.base}@fs`
}
},
configureServer(_server) {
server = _server
watcher = _server.watcher
_sources.forEach((source) => {
watcher?.add(source)
})
watcher.on("all", async (event, path) => {
switch (event) {
case "add":
case "change": {
await handleAddOrChange(path, event)
break
}
case "unlinkDir":
case "unlink":
await handleUnlink(path)
break
default:
break
}
})
},
resolveId(id) {
if (VIRTUAL_MODULES.includes(id)) {
return resolveVirtualId(id)
}
return null
},
async load(id) {
if (RESOLVED_WIDGET_MODULES.includes(id)) {
const zone = getWidgetZone(id)
return register(id, { type: "widget", get: zone })
}
if (RESOLVED_ROUTE_MODULES.includes(id)) {
const type = id.includes("link") ? "link" : "page"
return register(id, { type: "route", get: type })
}
},
async closeBundle() {
if (watcher) {
await watcher.close()
}
},
}
}

8
packages/admin-next/admin-vite-plugin/tsup.config.cjs Normal file
View File

@@ -0,0 +1,8 @@
import { defineConfig } from "tsup"
export default defineConfig({
entry: ["./src/index.ts"],
format: ["cjs", "esm"],
dts: true,
clean: true,
})

1
packages/admin-next/dashboard/package.json
View File

@@ -61,6 +61,7 @@
"zod": "^3.22.4"
},
"devDependencies": {
"@medusajs/admin-shared": "^0.0.1",
"@medusajs/admin-vite-plugin": "0.0.1",
"@medusajs/types": "1.11.16",
"@medusajs/ui-preset": "1.1.3",

31
packages/admin-next/dashboard/src/components/layout/main-layout/main-layout.tsx
View File

@@ -13,12 +13,15 @@ import { Avatar, Text } from "@medusajs/ui"
import * as Collapsible from "@radix-ui/react-collapsible"
import { useTranslation } from "react-i18next"
import { ComponentType } from "react"
import { useStore } from "../../../hooks/api/store"
import { Skeleton } from "../../common/skeleton"
import { NavItem, NavItemProps } from "../../layout/nav-item"
import { Shell } from "../../layout/shell"
import routes from "virtual:medusa/routes/links"
import { settingsRouteRegex } from "../../../lib/extension-helpers"
import { Divider } from "../../common/divider"
export const MainLayout = () => {
return (
<Shell>
@@ -34,7 +37,7 @@ const MainSidebar = () => {
<div className="bg-ui-bg-subtle sticky top-0">
<Header />
<div className="px-3">
<div className="border-ui-border-strong h-px w-full border-b border-dashed" />
<Divider variant="dashed" />
</div>
</div>
<CoreRouteSection />
@@ -157,7 +160,7 @@ const CoreRouteSection = () => {
const coreRoutes = useCoreRoutes()
return (
<nav className="flex flex-col gap-y-1 py-2">
<nav className="flex flex-col gap-y-1 py-3">
{coreRoutes.map((route) => {
return <NavItem key={route.to} {...route} />
})}
@@ -165,27 +168,31 @@ const CoreRouteSection = () => {
)
}
const extensions = {
links: null as { path: string; label: string; icon?: ComponentType }[] | null,
}
const ExtensionRouteSection = () => {
if (!extensions.links || extensions.links.length === 0) {
const { t } = useTranslation()
const links = routes.links
const extensionLinks = links.filter(
(link) => !settingsRouteRegex.test(link.path)
)
if (!extensionLinks.length) {
return null
}
return (
<div>
<div className="px-3">
<div className="border-ui-border-strong h-px w-full border-b border-dashed" />
<Divider variant="dashed" />
</div>
<div className="flex flex-col gap-y-1 py-2">
<div className="flex flex-col gap-y-1 py-3">
<Collapsible.Root defaultOpen>
<div className="px-4">
<Collapsible.Trigger asChild className="group/trigger">
<button className="text-ui-fg-subtle flex w-full items-center justify-between px-2">
<Text size="xsmall" weight="plus" leading="compact">
Extensions
{t("nav.extensions")}
</Text>
<div className="text-ui-fg-muted">
<ChevronDownMini className="group-data-[state=open]/trigger:hidden" />
@@ -196,7 +203,7 @@ const ExtensionRouteSection = () => {
</div>
<Collapsible.Content>
<div className="flex flex-col gap-y-1 py-1 pb-4">
{extensions.links.map((link) => {
{extensionLinks.map((link) => {
return (
<NavItem
key={link.path}

16
packages/admin-next/dashboard/src/components/layout/nav-item/nav-item.tsx
View File

@@ -1,6 +1,6 @@
import { Text, clx } from "@medusajs/ui"
import * as Collapsible from "@radix-ui/react-collapsible"
import { useEffect, useState } from "react"
import { ReactNode, useEffect, useState } from "react"
import { Link, useLocation } from "react-router-dom"
type ItemType = "core" | "extension"
@@ -11,7 +11,7 @@ type NestedItemProps = {
}
export type NavItemProps = {
icon?: React.ReactNode
icon?: ReactNode
label: string
to: string
items?: NestedItemProps[]
@@ -55,7 +55,7 @@ export const NavItem = ({
: undefined
}
className={clx(
"text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex items-center gap-x-2 rounded-md px-2 py-2.5 outline-none md:py-1.5",
"text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex items-center gap-x-2 rounded-md px-2 py-1 outline-none",
{
"bg-ui-bg-base hover:bg-ui-bg-base-hover shadow-elevation-card-rest":
location.pathname === to ||
@@ -82,7 +82,7 @@ export const NavItem = ({
</Text>
</Collapsible.Trigger>
<Collapsible.Content className="flex flex-col pt-1">
<div className="flex h-[36px] w-full items-center gap-x-1 pl-2 md:hidden">
<div className="flex w-full items-center gap-x-1 pl-2 md:hidden">
<div
role="presentation"
className="flex h-full w-5 items-center justify-center"
@@ -92,7 +92,7 @@ export const NavItem = ({
<Link
to={to}
className={clx(
"text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover mb-2 mt-1 flex h-8 flex-1 items-center gap-x-2 rounded-md px-2 py-2.5 outline-none md:py-1.5",
"text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover mb-2 mt-1 flex flex-1 items-center gap-x-2 rounded-md px-2 py-1 outline-none",
{
"bg-ui-bg-base hover:bg-ui-bg-base text-ui-fg-base shadow-elevation-card-rest":
location.pathname.startsWith(to),
@@ -109,7 +109,7 @@ export const NavItem = ({
return (
<li
key={item.to}
className="flex h-[36px] items-center gap-x-1 pl-2"
className="flex h-[32px] items-center gap-x-1 pl-2"
>
<div
role="presentation"
@@ -120,7 +120,7 @@ export const NavItem = ({
<Link
to={item.to}
className={clx(
"text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex h-8 flex-1 items-center gap-x-2 rounded-md px-2 py-2.5 outline-none first-of-type:mt-1 last-of-type:mb-2 md:py-1.5",
"text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex flex-1 items-center gap-x-2 rounded-md px-2 py-1 outline-none first-of-type:mt-1 last-of-type:mb-2",
{
"bg-ui-bg-base text-ui-fg-base hover:bg-ui-bg-base shadow-elevation-card-rest":
location.pathname.startsWith(item.to),
@@ -142,7 +142,7 @@ export const NavItem = ({
)
}
const Icon = ({ icon, type }: { icon?: React.ReactNode; type: ItemType }) => {
const Icon = ({ icon, type }: { icon?: ReactNode; type: ItemType }) => {
if (!icon) {
return null
}

74
packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx
View File

@@ -1,13 +1,17 @@
import { ArrowUturnLeft, MinusMini } from "@medusajs/icons"
import { IconButton, Text } from "@medusajs/ui"
import * as Collapsible from "@radix-ui/react-collapsible"
import { useEffect, useMemo, useState } from "react"
import { Fragment, useEffect, useMemo, useState } from "react"
import { useTranslation } from "react-i18next"
import { Link, useLocation } from "react-router-dom"
import { settingsRouteRegex } from "../../../lib/extension-helpers"
import { Divider } from "../../common/divider"
import { NavItem, NavItemProps } from "../nav-item"
import { Shell } from "../shell"
import routes from "virtual:medusa/routes/links"
export const SettingsLayout = () => {
return (
<Shell>
@@ -80,6 +84,21 @@ const useDeveloperRoutes = (): NavItemProps[] => {
)
}
const useExtensionRoutes = (): NavItemProps[] => {
const links = routes.links
return useMemo(() => {
const settingsLinks = links.filter((link) =>
settingsRouteRegex.test(link.path)
)
return settingsLinks.map((link) => ({
label: link.label,
to: link.path,
}))
}, [links])
}
/**
* Ensure that the `from` prop is not another settings route, to avoid
* the user getting stuck in a navigation loop.
@@ -95,6 +114,8 @@ const getSafeFromValue = (from: string) => {
const SettingsSidebar = () => {
const routes = useSettingRoutes()
const developerRoutes = useDeveloperRoutes()
const extensionRoutes = useExtensionRoutes()
const { t } = useTranslation()
const location = useLocation()
@@ -108,20 +129,24 @@ const SettingsSidebar = () => {
return (
<aside className="flex flex-1 flex-col justify-between overflow-y-auto">
<div className="px-3 py-2">
<div className="flex items-center gap-x-3 p-1">
<Link to={from} replace className="flex items-center justify-center">
<IconButton size="small" variant="transparent">
<div className="p-3">
<div className="flex items-center gap-x-3 px-2 py-1.5">
<IconButton size="2xsmall" variant="transparent" asChild>
<Link
to={from}
replace
className="flex items-center justify-center"
>
<ArrowUturnLeft />
</IconButton>
</Link>
</IconButton>
<Text leading="compact" weight="plus" size="small">
{t("nav.settings")}
</Text>
</div>
</div>
<div className="px-3">
<div className="border-ui-border-strong h-px w-full border-b border-dashed" />
<div className="flex items-center justify-center px-3">
<Divider variant="dashed" />
</div>
<div className="flex flex-1 flex-col overflow-y-auto">
<Collapsible.Root defaultOpen className="py-3">
@@ -147,6 +172,9 @@ const SettingsSidebar = () => {
</div>
</Collapsible.Content>
</Collapsible.Root>
<div className="flex items-center justify-center px-3">
<Divider variant="dashed" />
</div>
<Collapsible.Root defaultOpen className="py-3">
<div className="px-3">
<div className="text-ui-fg-muted flex h-7 items-center justify-between px-2">
@@ -170,6 +198,36 @@ const SettingsSidebar = () => {
</div>
</Collapsible.Content>
</Collapsible.Root>
{extensionRoutes.length > 0 && (
<Fragment>
<div className="flex items-center justify-center px-3">
<Divider variant="dashed" />
</div>
<Collapsible.Root defaultOpen className="py-3">
<div className="px-3">
<div className="text-ui-fg-muted flex h-7 items-center justify-between px-2">
<Text size="small" leading="compact">
{t("nav.extensions")}
</Text>
<Collapsible.Trigger asChild>
<IconButton size="2xsmall" variant="transparent">
<MinusMini className="text-ui-fg-muted" />
</IconButton>
</Collapsible.Trigger>
</div>
</div>
<Collapsible.Content>
<div className="pt-0.5">
<nav className="flex flex-col gap-y-1">
{extensionRoutes.map((setting) => (
<NavItem key={setting.to} {...setting} />
))}
</nav>
</div>
</Collapsible.Content>
</Collapsible.Root>
</Fragment>
)}
</div>
</aside>
)

56
packages/admin-next/dashboard/src/lib/extension-helpers.ts Normal file
View File

@@ -0,0 +1,56 @@
import { RouteObject } from "react-router-dom"
/**
* Used to test if a route is a settings route.
*/
export const settingsRouteRegex = /^\/settings\//
export const createRouteMap = (
routes: { path: string; file: string }[],
ignore?: string
): RouteObject[] => {
const root: RouteObject[] = []
const addRoute = (
pathSegments: string[],
file: string,
currentLevel: RouteObject[]
) => {
if (!pathSegments.length) {
return
}
const [currentSegment, ...remainingSegments] = pathSegments
let route = currentLevel.find((r) => r.path === currentSegment)
if (!route) {
route = { path: currentSegment, children: [] }
currentLevel.push(route)
}
if (remainingSegments.length === 0) {
route.children ||= []
route.children.push({
path: "",
async lazy() {
const { default: Component } = await import(/* @vite-ignore */ file)
return { Component }
},
})
} else {
route.children ||= []
addRoute(remainingSegments, file, route.children)
}
}
routes.forEach(({ path, file }) => {
// Remove the ignore segment from the path if it is provided
const cleanedPath = ignore
? path.replace(ignore, "").replace(/^\/+/, "")
: path.replace(/^\/+/, "")
const pathSegments = cleanedPath.split("/").filter(Boolean)
addRoute(pathSegments, file, root)
})
return root
}

40
packages/admin-next/dashboard/src/module.d.ts vendored
View File

@@ -1,4 +1,4 @@
declare module "medusa-admin:widgets/*" {
declare module "virtual:medusa/widgets/*" {
const widgets: { Component: () => JSX.Element }[]
export default {
@@ -6,34 +6,20 @@ declare module "medusa-admin:widgets/*" {
}
}
declare module "medusa-admin:routes/links" {
const links: { path: string; label: string; icon?: React.ComponentType }[]
declare module "virtual:medusa/routes/pages" {
const pages: { path: string; file: string }[]
export default {
pages,
}
}
declare module "virtual:medusa/routes/links" {
import type { ComponentType } from "react"
const links: { path: string; label: string; icon?: ComponentType }[]
export default {
links,
}
}
declare module "medusa-admin:routes/pages" {
const pages: { path: string; file: string }[]
export default {
pages,
}
}
declare module "medusa-admin:settings/cards" {
const cards: { path: string; label: string; description: string }[]
export default {
cards,
}
}
declare module "medusa-admin:settings/pages" {
const pages: { path: string; file: string }[]
export default {
pages,
}
}

20
packages/admin-next/dashboard/src/providers/router-provider/route-extensions.tsx
View File

@@ -1,18 +1,12 @@
import { RouteObject } from "react-router-dom"
import routes from "virtual:medusa/routes/pages"
// import routes from "medusa-admin:routes/pages"
import { createRouteMap, settingsRouteRegex } from "../../lib/extension-helpers"
export const RouteExtensions: RouteObject[] = []
const pages = routes.pages
.filter((ext) => !settingsRouteRegex.test(ext.path))
.map((ext) => ext)
/**
* UI Route extensions.
* Core Route extensions.
*/
// export const RouteExtensions: RouteObject[] = routes.pages.map((ext) => {
// return {
// path: ext.path,
// async lazy() {
// const { default: Component } = await import(/* @vite-ignore */ ext.file)
// return { Component }
// },
// }
// })
export const RouteExtensions = createRouteMap(pages)

6
packages/admin-next/dashboard/src/providers/router-provider/route-map.tsx
View File

@@ -517,9 +517,9 @@ export const RouteMap: RouteObject[] = [
},
],
},
...RouteExtensions,
],
},
...RouteExtensions,
],
},
{
@@ -1009,9 +1009,9 @@ export const RouteMap: RouteObject[] = [
},
],
},
],
},
...SettingsExtensions,
],
},
],
},
]

23
packages/admin-next/dashboard/src/providers/router-provider/settings-extensions.tsx
View File

@@ -1,19 +1,12 @@
import { RouteObject } from "react-router-dom"
import routes from "virtual:medusa/routes/pages"
// import settings from "medusa-admin:settings/pages"
import { createRouteMap, settingsRouteRegex } from "../../lib/extension-helpers"
const pages = routes.pages
.filter((ext) => settingsRouteRegex.test(ext.path))
.map((ext) => ext)
/**
* UI Settings extensions.
* Settings Route extensions.
*/
export const SettingsExtensions: RouteObject[] = []
// export const SettingsExtensions: RouteObject[] = settings.pages.map((ext) => {
// return {
// path: `/settings${ext.path}`,
// async lazy() {
// const { default: Component } = await import(/* @vite-ignore */ ext.file)
// return { Component }
// },
// }
// })
export const SettingsExtensions = createRouteMap(pages, "/settings")

9
packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx
View File

@@ -10,7 +10,9 @@ import { ProductVariantSection } from "./components/product-variant-section"
import { productLoader } from "./loader"
// import after from "medusa-admin:widgets/product/details/after"
// import before from "medusa-admin:widgets/product/details/before"
// @ts-ignore - virtual module
// import obj from "virtual:config"
import before from "virtual:medusa/widgets/product/details/before"
// import sideAfter from "medusa-admin:widgets/product/details/side/after"
// import sideBefore from "medusa-admin:widgets/product/details/side/before"
@@ -38,14 +40,13 @@ export const ProductDetail = () => {
return (
<div className="flex flex-col gap-y-2">
{/* {before.widgets.map((w, i) => {
{before.widgets.map((w, i) => {
return (
<div key={i}>
<w.Component />
</div>
)
})} */}
})}
<div className="flex flex-col gap-x-4 lg:flex-row lg:items-start">
<div className="flex w-full flex-col gap-y-2">
<ProductGeneralSection product={product} />

2
packages/admin-next/dashboard/tsconfig.node.json
View File

@@ -6,5 +6,5 @@
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.mts"]
"include": ["vite.config.js"]
}

10
packages/admin-next/dashboard/tsup.config.cjs Normal file
View File

@@ -0,0 +1,10 @@
import { VIRTUAL_MODULES } from "@medusajs/admin-shared"
import { defineConfig } from "tsup"
export default defineConfig({
entry: ["./src/app.tsx"],
format: ["cjs", "esm"],
external: [...VIRTUAL_MODULES, "virtual:config"],
tsconfig: "tsconfig.build.json",
clean: true,
})

23
packages/admin-next/dashboard/tsup.config.ts
View File

@@ -1,23 +0,0 @@
import { defineConfig } from "tsup"
export default defineConfig({
entry: ["./src/app.tsx"],
format: ["cjs", "esm"],
external: [
"medusa-admin:settings/pages",
"medusa-admin:routes/pages",
"medusa-admin:widgets/promotion/list/after",
"medusa-admin:widgets/promotion/list/before",
"medusa-admin:widgets/promotion/details/after",
"medusa-admin:widgets/promotion/details/before",
"medusa-admin:widgets/product/list/after",
"medusa-admin:widgets/product/list/before",
"medusa-admin:widgets/product/details/after",
"medusa-admin:widgets/product/details/before",
"medusa-admin:widgets/product/details/side/after",
"medusa-admin:widgets/product/details/side/before",
"medusa-admin:routes/links",
],
tsconfig: "tsconfig.build.json",
clean: true,
})

10
packages/admin-next/dashboard/vite.config.mts
View File

@@ -5,9 +5,17 @@ import { defineConfig } from "vite"
const BASE = "/"
const BACKEND_URL = "http://localhost:9000"
console.log(inject)
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), inject()],
plugins: [
react(),
inject({
debug: true,
sources: ["/Users/kasperkristensen/work/v2-server/src/admin"],
}),
],
define: {
__BASE__: JSON.stringify(BASE),
__BACKEND_URL__: JSON.stringify(BACKEND_URL),

24
packages/medusa/src/commands/build.ts
View File

@@ -1,7 +1,8 @@
import { ConfigModule } from "@medusajs/types"
import { transformFile } from "@swc/core"
import { getConfigFile } from "medusa-core-utils"
import fs from "node:fs/promises"
import { existsSync } from "node:fs"
import { copyFile, mkdir, readdir, rm, writeFile } from "node:fs/promises"
import path from "path"
type BuildArgs = {
@@ -21,12 +22,12 @@ const COMPILE_EXTENSIONS = [".ts", ".tsx", ".js", ".jsx"]
const IGNORE_EXTENSIONS = [".md"]
async function clean(path: string) {
await fs.rm(path, { recursive: true }).catch(() => {})
await rm(path, { recursive: true }).catch(() => {})
}
async function findFiles(dir: string): Promise<string[]> {
try {
const files = await fs.readdir(dir, { withFileTypes: true })
const files = await readdir(dir, { withFileTypes: true })
const paths = await Promise.all(
files.map(async (file) => {
const res = path.join(dir, file.name)
@@ -64,16 +65,16 @@ const writeToOut = async (
) => {
const outputPath = getOutputPath(file, config)
await fs.mkdir(outputPath.replace(/\/[^/]+$/, ""), { recursive: true })
await fs.writeFile(outputPath, content)
await mkdir(outputPath.replace(/\/[^/]+$/, ""), { recursive: true })
await writeFile(outputPath, content)
}
async function copyToOut(file: string, config: FileConfig) {
const outputPath = getOutputPath(file, config)
const dirNameRegex = new RegExp("\\" + path.sep + "([^\\" + path.sep + "]+)$")
await fs.mkdir(outputPath.replace(dirNameRegex, ""), { recursive: true })
await fs.copyFile(file, outputPath)
await mkdir(outputPath.replace(dirNameRegex, ""), { recursive: true })
await copyFile(file, outputPath)
}
const medusaTransform = async (file: string) => {
@@ -131,10 +132,19 @@ export default async function ({ directory }: BuildArgs) {
await Promise.all(files.map(medusaTransform))
const sources: string[] = []
const projectSource = path.join(directory, "src", "admin")
if (existsSync(projectSource)) {
sources.push(projectSource)
}
const adminOptions = {
disable: false,
path: "/app" as const,
outDir: "./build",
sources,
...configModule.admin,
}

29
packages/medusa/src/loaders/admin.ts
View File

@@ -1,22 +1,43 @@
import { AdminOptions, ConfigModule } from "@medusajs/types"
import { Express } from "express"
import fs from "fs"
import path from "path"
type Options = {
app: Express
adminConfig: ConfigModule["admin"]
configModule: ConfigModule
rootDirectory: string
}
type IntializedOptions = Required<
Pick<AdminOptions, "path" | "disable" | "outDir">
> &
AdminOptions
AdminOptions & {
sources?: string[]
}
export default async function adminLoader({
app,
configModule,
rootDirectory,
}: Options) {
const { admin } = configModule
const sources: string[] = []
const projectSource = path.join(rootDirectory, "src", "admin")
// check if the projectSource exists
if (fs.existsSync(projectSource)) {
sources.push(projectSource)
}
export default async function adminLoader({ app, adminConfig }: Options) {
const adminOptions: IntializedOptions = {
disable: false,
path: "/app",
outDir: "./build",
...adminConfig,
sources,
...admin,
}
if (adminOptions?.disable) {

19
packages/medusa/src/loaders/index.ts
View File

@@ -1,25 +1,24 @@
import { createDefaultsWorkflow } from "@medusajs/core-flows"
import { ConfigModule, MedusaContainer } from "@medusajs/types"
import { ConfigModule, MedusaContainer, PluginDetails } from "@medusajs/types"
import { ContainerRegistrationKeys, promiseAll } from "@medusajs/utils"
import { asValue } from "awilix"
import { Express, NextFunction, Request, Response } from "express"
import glob from "glob"
import { createMedusaContainer } from "medusa-core-utils"
import path from "path"
import requestIp from "request-ip"
import { v4 } from "uuid"
import path from "path"
import adminLoader from "./admin"
import apiLoader from "./api"
import loadConfig from "./config"
import expressLoader from "./express"
import featureFlagsLoader from "./feature-flags"
import { registerWorkflows } from "./helpers/register-workflows"
import { getResolvedPlugins } from "./helpers/resolve-plugins"
import { SubscriberLoader } from "./helpers/subscribers"
import Logger from "./logger"
import loadMedusaApp from "./medusa-app"
import registerPgConnection from "./pg-connection"
import { SubscriberLoader } from "./helpers/subscribers"
import { getResolvedPlugins } from "./helpers/resolve-plugins"
import { PluginDetails } from "@medusajs/types"
import glob from "glob"
type Options = {
directory: string
@@ -63,7 +62,8 @@ async function subscribersLoader(
async function loadEntrypoints(
plugins: PluginDetails[],
container: MedusaContainer,
expressApp: Express
expressApp: Express,
rootDirectory: string
) {
const configModule: ConfigModule = container.resolve(
ContainerRegistrationKeys.CONFIG_MODULE
@@ -89,7 +89,7 @@ async function loadEntrypoints(
next()
})
await adminLoader({ app: expressApp, adminConfig: configModule.admin })
await adminLoader({ app: expressApp, configModule, rootDirectory })
await subscribersLoader(plugins, container)
await apiLoader({
container,
@@ -143,7 +143,8 @@ export default async ({
const entrypointsShutdown = await loadEntrypoints(
plugins,
container,
expressApp
expressApp,
rootDirectory
)
await createDefaultsWorkflow(container).run()

37
yarn.lock
View File

@@ -5009,16 +5009,15 @@ __metadata:
version: 0.0.0-use.local
resolution: "@medusajs/admin-sdk@workspace:packages/admin-next/admin-sdk"
dependencies:
"@medusajs/admin-shared": 0.0.1
"@medusajs/admin-vite-plugin": 0.0.1
"@medusajs/dashboard": 0.0.1
"@medusajs/types": ^1.11.16
"@types/compression": ^1.7.5
"@types/connect-history-api-fallback": ^1.5.4
"@vitejs/plugin-react": ^4.2.1
autoprefixer: ^10.4.16
commander: ^11.1.0
compression: ^1.7.4
connect-history-api-fallback: ^2.0.0
copyfiles: ^2.4.1
deepmerge: ^4.3.1
express: ^4.18.2
@@ -5035,10 +5034,12 @@ __metadata:
languageName: unknown
linkType: soft
"@medusajs/admin-shared@0.0.1, @medusajs/admin-shared@workspace:packages/admin-next/admin-shared":
"@medusajs/admin-shared@0.0.1, @medusajs/admin-shared@^0.0.1, @medusajs/admin-shared@workspace:packages/admin-next/admin-shared":
version: 0.0.0-use.local
resolution: "@medusajs/admin-shared@workspace:packages/admin-next/admin-shared"
dependencies:
"@types/react": ^18.3.2
tsup: ^8.0.2
typescript: ^5.3.3
languageName: unknown
linkType: soft
@@ -5259,6 +5260,7 @@ __metadata:
"@dnd-kit/core": ^6.1.0
"@dnd-kit/sortable": ^8.0.0
"@hookform/resolvers": 3.3.2
"@medusajs/admin-shared": ^0.0.1
"@medusajs/admin-vite-plugin": 0.0.1
"@medusajs/icons": 1.2.1
"@medusajs/js-sdk": 0.0.1
@@ -11157,16 +11159,6 @@ __metadata:
languageName: node
linkType: hard
"@types/connect-history-api-fallback@npm:^1.5.4":
version: 1.5.4
resolution: "@types/connect-history-api-fallback@npm:1.5.4"
dependencies:
"@types/express-serve-static-core": "*"
"@types/node": "*"
checksum: 1b4035b627dcd714b05a22557f942e24a57ca48e7377dde0d2f86313fe685bc0a6566512a73257a55b5665b96c3041fb29228ac93331d8133011716215de8244
languageName: node
linkType: hard
"@types/connect@npm:*":
version: 3.4.38
resolution: "@types/connect@npm:3.4.38"
@@ -11255,7 +11247,7 @@ __metadata:
languageName: node
linkType: hard
"@types/express-serve-static-core@npm:*, @types/express-serve-static-core@npm:^4.17.33":
"@types/express-serve-static-core@npm:^4.17.33":
version: 4.19.0
resolution: "@types/express-serve-static-core@npm:4.19.0"
dependencies:
@@ -11724,6 +11716,16 @@ __metadata:
languageName: node
linkType: hard
"@types/react@npm:^18.3.2":
version: 18.3.2
resolution: "@types/react@npm:18.3.2"
dependencies:
"@types/prop-types": "*"
csstype: ^3.0.2
checksum: 9fb2f1fcf7e889ee4ea7c3c5978df595c66e770e5fd3a245dbdd2589b9b911524c11dab25a6275d8af4e336e4cb5fa850d447884b84c335a187a338c89df99ba
languageName: node
linkType: hard
"@types/resolve@npm:1.17.1":
version: 1.17.1
resolution: "@types/resolve@npm:1.17.1"
@@ -15167,13 +15169,6 @@ __metadata:
languageName: node
linkType: hard
"connect-history-api-fallback@npm:^2.0.0":
version: 2.0.0
resolution: "connect-history-api-fallback@npm:2.0.0"
checksum: 90fa8b16ab76e9531646cc70b010b1dbd078153730c510d3142f6cf07479ae8a812c5a3c0e40a28528dd1681a62395d0cfdef67da9e914c4772ac85d69a3ed87
languageName: node
linkType: hard
"connect-redis@npm:^5.0.0":
version: 5.2.0
resolution: "connect-redis@npm:5.2.0"