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

packages/admin/admin-vite-plugin/src/custom-fields/generate-custom-field-displays.ts

@@ -0,0 +1,292 @@
+import {
+  isValidCustomFieldDisplayPath,
+  isValidCustomFieldDisplayZone,
+  type CustomFieldContainerZone,
+  type CustomFieldModel,
+} from "@medusajs/admin-shared"
+import fs from "fs/promises"
+import {
+  ExportDefaultDeclaration,
+  File,
+  isArrayExpression,
+  isIdentifier,
+  isObjectExpression,
+  isObjectProperty,
+  isStringLiteral,
+  NodePath,
+  ObjectProperty,
+  parse,
+  ParseResult,
+  traverse,
+} from "../babel"
+import { logger } from "../logger"
+import { crawl, getParserOptions } from "../utils"
+import { getConfigArgument, getModel, validateLink } from "./helpers"
+
+type CustomFieldDisplay = {
+  zone: CustomFieldContainerZone
+  Component: string
+}
+
+type ParsedCustomFieldDisplayConfig = {
+  import: string
+  model: CustomFieldModel
+  displays: CustomFieldDisplay[] | null
+}
+
+export async function generateCustomFieldDisplays(sources: Set<string>) {
+  const files = await getFilesFromSources(sources)
+  const results = await getCustomFieldDisplayResults(files)
+
+  const imports = results.map((result) => result.import).flat()
+  const code = generateDisplayCode(results)
+
+  return {
+    imports,
+    code,
+  }
+}
+
+async function getFilesFromSources(sources: Set<string>): Promise<string[]> {
+  const files = (
+    await Promise.all(
+      Array.from(sources).map(async (source) =>
+        crawl(`${source}/custom-fields`)
+      )
+    )
+  ).flat()
+  return files
+}
+
+function generateDisplayCode(
+  results: ParsedCustomFieldDisplayConfig[]
+): string {
+  const groupedByModel = new Map<
+    CustomFieldModel,
+    ParsedCustomFieldDisplayConfig[]
+  >()
+
+  results.forEach((result) => {
+    const model = result.model
+    if (!groupedByModel.has(model)) {
+      groupedByModel.set(model, [])
+    }
+    groupedByModel.get(model)!.push(result)
+  })
+
+  const segments: string[] = []
+
+  groupedByModel.forEach((results, model) => {
+    const displays = results
+      .map((result) => formatDisplays(result.displays))
+      .filter((display) => display !== "")
+      .join(",\n")
+
+    segments.push(`
+      ${model}: [
+        ${displays}
+      ],
+    `)
+  })
+
+  return `
+    displays: {
+      ${segments.join("\n")}
+    }
+  `
+}
+
+function formatDisplays(displays: CustomFieldDisplay[] | null): string {
+  if (!displays || displays.length === 0) {
+    return ""
+  }
+
+  return displays
+    .map(
+      (display) => `
+        {
+          zone: "${display.zone}",
+          Component: ${display.Component},
+        }
+      `
+    )
+    .join(",\n")
+}
+
+async function getCustomFieldDisplayResults(
+  files: string[]
+): Promise<ParsedCustomFieldDisplayConfig[]> {
+  return (
+    await Promise.all(
+      files.map(async (file, index) => parseDisplayFile(file, index))
+    )
+  ).filter(Boolean) as ParsedCustomFieldDisplayConfig[]
+}
+
+async function parseDisplayFile(
+  file: string,
+  index: number
+): Promise<ParsedCustomFieldDisplayConfig | null> {
+  const content = await fs.readFile(file, "utf8")
+  let ast: ParseResult<File>
+
+  try {
+    ast = parse(content, getParserOptions(file))
+  } catch (e) {
+    logger.error(`An error occurred while parsing the file`, { file, error: e })
+    return null
+  }
+
+  const import_ = generateImport(file, index)
+
+  let displays: CustomFieldDisplay[] | null = null
+  let model: CustomFieldModel | null = null
+  let hasLink = false
+  try {
+    traverse(ast, {
+      ExportDefaultDeclaration(path) {
+        const _model = getModel(path, file)
+
+        if (!_model) {
+          return
+        }
+
+        model = _model
+        displays = getDisplays(path, model, index, file)
+        hasLink = validateLink(path, file)
+      },
+    })
+  } catch (err) {
+    logger.error(`An error occurred while traversing the file.`, {
+      file,
+      error: err,
+    })
+    return null
+  }
+
+  if (!model) {
+    logger.warn(`'model' property is missing.`, { file })
+    return null
+  }
+
+  if (!hasLink) {
+    logger.warn(`'link' property is missing.`, { file })
+    return null
+  }
+
+  return {
+    import: import_,
+    model,
+    displays,
+  }
+}
+
+function getDisplays(
+  path: NodePath<ExportDefaultDeclaration>,
+  model: CustomFieldModel,
+  index: number,
+  file: string
+): CustomFieldDisplay[] | null {
+  const configArgument = getConfigArgument(path)
+
+  if (!configArgument) {
+    return null
+  }
+
+  const displayProperty = configArgument.properties.find(
+    (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "displays" })
+  ) as ObjectProperty | undefined
+
+  if (!displayProperty) {
+    return null
+  }
+
+  if (!isArrayExpression(displayProperty.value)) {
+    logger.warn(
+      `'displays' is not an array. The 'displays' property must be an array of objects.`,
+      { file }
+    )
+    return null
+  }
+
+  const displays: CustomFieldDisplay[] = []
+
+  displayProperty.value.elements.forEach((element, j) => {
+    if (!isObjectExpression(element)) {
+      return
+    }
+
+    const zoneProperty = element.properties.find(
+      (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "zone" })
+    ) as ObjectProperty | undefined
+
+    if (!zoneProperty) {
+      logger.warn(
+        `'zone' property is missing at the ${j} index of the 'displays' property.`,
+        { file }
+      )
+      return
+    }
+
+    if (!isStringLiteral(zoneProperty.value)) {
+      logger.warn(
+        `'zone' property at index ${j} in the 'displays' property is not a string literal. 'zone' must be a string literal, e.g. 'general' or 'attributes'.`,
+        { file }
+      )
+      return
+    }
+
+    const zone = zoneProperty.value.value
+    const fullPath = getDisplayEntryPath(model, zone)
+
+    if (
+      !isValidCustomFieldDisplayZone(zone) ||
+      !isValidCustomFieldDisplayPath(fullPath)
+    ) {
+      logger.warn(
+        `'zone' is invalid at index ${j} in the 'displays' property. Received: ${zone}.`,
+        { file }
+      )
+      return
+    }
+
+    const componentProperty = element.properties.find(
+      (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "component" })
+    ) as ObjectProperty | undefined
+
+    if (!componentProperty) {
+      logger.warn(
+        `'component' property is missing at index ${j} in the 'displays' property.`,
+        { file }
+      )
+      return
+    }
+
+    displays.push({
+      zone: zone,
+      Component: getDisplayComponent(index, j),
+    })
+  })
+
+  return displays.length > 0 ? displays : null
+}
+
+function getDisplayEntryPath(model: CustomFieldModel, zone: string): string {
+  return `${model}.${zone}.$display`
+}
+
+function getDisplayComponent(
+  fileIndex: number,
+  displayEntryIndex: number
+): string {
+  const import_ = generateCustomFieldConfigName(fileIndex)
+  return `${import_}.displays[${displayEntryIndex}].component`
+}
+
+function generateCustomFieldConfigName(index: number): string {
+  return `CustomFieldConfig${index}`
+}
+
+function generateImport(file: string, index: number): string {
+  return `import ${generateCustomFieldConfigName(index)} from "${file}"`
+}

packages/admin/admin-vite-plugin/src/custom-fields/generate-custom-field-forms.ts

@@ -0,0 +1,707 @@
+import { ArrayExpression } from "@babel/types"
+import {
+  isValidCustomFieldFormConfigPath,
+  isValidCustomFieldFormFieldPath,
+  isValidCustomFieldFormTab,
+  isValidCustomFieldFormZone,
+  type CustomFieldFormTab,
+  type CustomFieldFormZone,
+  type CustomFieldModel,
+} from "@medusajs/admin-shared"
+import fs from "fs/promises"
+import { outdent } from "outdent"
+import {
+  ExportDefaultDeclaration,
+  File,
+  isArrayExpression,
+  isCallExpression,
+  isIdentifier,
+  isMemberExpression,
+  isObjectExpression,
+  isObjectProperty,
+  isStringLiteral,
+  isTemplateLiteral,
+  NodePath,
+  ObjectExpression,
+  ObjectProperty,
+  parse,
+  ParseResult,
+  traverse,
+} from "../babel"
+import { logger } from "../logger"
+import { crawl, getParserOptions } from "../utils"
+import { getConfigArgument, getModel, validateLink } from "./helpers"
+
+type CustomFieldConfigField = {
+  name: string
+  defaultValue: string
+  validation: string
+}
+
+type CustomFieldConfig = {
+  zone: CustomFieldFormZone
+  fields: CustomFieldConfigField[]
+}
+
+type CustomFieldFormField = {
+  name: string
+  label: string
+  description: string
+  placeholder: string
+  Component: string
+  validation: string
+}
+
+type CustomFieldFormSection = {
+  zone: CustomFieldFormZone
+  tab?: CustomFieldFormTab
+  fields: CustomFieldFormField[]
+}
+
+type ParsedCustomFieldConfig = {
+  import: string
+  model: CustomFieldModel
+  configs: CustomFieldConfig[] | null
+  forms: CustomFieldFormSection[] | null
+}
+
+export async function generateCustomFieldForms(sources: Set<string>) {
+  const files = await getFilesFromSources(sources)
+  const results = await getCustomFieldResults(files)
+
+  const imports = results.map((result) => result.import).flat()
+  const code = generateCode(results)
+
+  return {
+    imports,
+    code,
+  }
+}
+
+async function getFilesFromSources(sources: Set<string>): Promise<string[]> {
+  const files = (
+    await Promise.all(
+      Array.from(sources).map(async (source) =>
+        crawl(`${source}/custom-fields`)
+      )
+    )
+  ).flat()
+  return files
+}
+
+function generateCode(results: ParsedCustomFieldConfig[]): string {
+  const groupedByModel = new Map<CustomFieldModel, ParsedCustomFieldConfig[]>()
+
+  results.forEach((result) => {
+    const model = result.model
+    if (!groupedByModel.has(model)) {
+      groupedByModel.set(model, [])
+    }
+    groupedByModel.get(model)!.push(result)
+  })
+
+  const segments: string[] = []
+
+  groupedByModel.forEach((results, model) => {
+    const configs = results
+      .map((result) => formatConfig(result.configs))
+      .filter((config) => config !== "")
+      .join(",\n")
+    const forms = results
+      .map((result) => formatForms(result.forms))
+      .filter((form) => form !== "")
+      .join(",\n")
+
+    segments.push(outdent`
+      ${model}: {
+        configs: [
+          ${configs}
+        ],
+        forms: [
+          ${forms}
+        ],
+      }
+    `)
+  })
+
+  return outdent`
+    customFields: {
+      ${segments.join("\n")}
+    }
+  `
+}
+
+function formatConfig(configs: CustomFieldConfig[] | null): string {
+  if (!configs || configs.length === 0) {
+    return ""
+  }
+
+  return outdent`
+    ${configs
+      .map(
+        (config) => outdent`
+        {
+          zone: "${config.zone}",
+          fields: {
+            ${config.fields
+              .map(
+                (field) => `${field.name}: {
+              defaultValue: ${field.defaultValue},
+              validation: ${field.validation},
+            }`
+              )
+              .join(",\n")}
+          },
+        }
+      `
+      )
+      .join(",\n")}
+  `
+}
+
+function formatForms(forms: CustomFieldFormSection[] | null): string {
+  if (!forms || forms.length === 0) {
+    return ""
+  }
+
+  return forms
+    .map(
+      (form) => outdent`
+        {
+          zone: "${form.zone}",
+          tab: ${form.tab === undefined ? undefined : `"${form.tab}"`},
+          fields: {
+            ${form.fields
+              .map(
+                (field) => `${field.name}: {
+              validation: ${field.validation},
+              Component: ${field.Component},
+              label: ${field.label},
+              description: ${field.description},
+              placeholder: ${field.placeholder},
+            }`
+              )
+              .join(",\n")}
+          },
+        }
+      `
+    )
+    .join(",\n")
+}
+
+async function getCustomFieldResults(
+  files: string[]
+): Promise<ParsedCustomFieldConfig[]> {
+  return (
+    await Promise.all(files.map(async (file, index) => parseFile(file, index)))
+  ).filter(Boolean) as ParsedCustomFieldConfig[]
+}
+
+async function parseFile(
+  file: string,
+  index: number
+): Promise<ParsedCustomFieldConfig | null> {
+  const content = await fs.readFile(file, "utf8")
+  let ast: ParseResult<File>
+
+  try {
+    ast = parse(content, getParserOptions(file))
+  } catch (e) {
+    logger.error(`An error occurred while parsing the file`, { file, error: e })
+    return null
+  }
+
+  const import_ = generateImport(file, index)
+
+  let configs: CustomFieldConfig[] | null = []
+  let forms: CustomFieldFormSection[] | null = []
+  let model: CustomFieldModel | null = null
+  let hasLink = false
+  try {
+    traverse(ast, {
+      ExportDefaultDeclaration(path) {
+        const _model = getModel(path, file)
+
+        if (!_model) {
+          return
+        }
+
+        model = _model
+        hasLink = validateLink(path, file) // Add this line to validate link
+        configs = getConfigs(path, model, index, file)
+        forms = getForms(path, model, index, file)
+      },
+    })
+  } catch (err) {
+    logger.error(`An error occurred while traversing the file.`, {
+      file,
+      error: err,
+    })
+    return null
+  }
+
+  if (!model) {
+    logger.warn(`'model' property is missing.`, { file })
+    return null
+  }
+
+  if (!hasLink) {
+    logger.warn(`'link' property is missing.`, { file })
+    return null
+  }
+
+  return {
+    import: import_,
+    model,
+    configs,
+    forms,
+  }
+}
+
+function generateCustomFieldConfigName(index: number): string {
+  return `CustomFieldConfig${index}`
+}
+
+function generateImport(file: string, index: number): string {
+  return `import ${generateCustomFieldConfigName(index)} from "${file}"`
+}
+
+function getForms(
+  path: NodePath<ExportDefaultDeclaration>,
+  model: CustomFieldModel,
+  index: number,
+  file: string
+): CustomFieldFormSection[] | null {
+  const formArray = getFormsArgument(path, file)
+
+  if (!formArray) {
+    return null
+  }
+
+  const forms: CustomFieldFormSection[] = []
+
+  formArray.elements.forEach((element, j) => {
+    if (!isObjectExpression(element)) {
+      return
+    }
+
+    const zoneProperty = element.properties.find(
+      (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "zone" })
+    ) as ObjectProperty | undefined
+
+    if (!zoneProperty) {
+      logger.warn(
+        `'zone' property is missing from the ${j} index of the 'forms' property. The 'zone' property is required to load a custom field form.`,
+        { file }
+      )
+      return
+    }
+
+    if (!isStringLiteral(zoneProperty.value)) {
+      logger.warn(
+        `'zone' property at the ${j} index of the 'forms' property is not a string literal. The 'zone' property must be a string literal, e.g. 'general' or 'attributes'.`,
+        { file }
+      )
+      return
+    }
+
+    const tabProperty = element.properties.find(
+      (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "tab" })
+    ) as ObjectProperty | undefined
+
+    let tab: string | undefined
+
+    if (tabProperty) {
+      if (!isStringLiteral(tabProperty.value)) {
+        logger.warn(
+          `'tab' property at the ${j} index of the 'forms' property is not a string literal. The 'tab' property must be a string literal, e.g. 'general' or 'attributes'.`,
+          { file }
+        )
+        return
+      }
+
+      tab = tabProperty.value.value
+    }
+
+    if (tab && !isValidCustomFieldFormTab(tab)) {
+      logger.warn(
+        `'tab' property at the ${j} index of the 'forms' property is not a valid custom field form tab for the '${model}' model. Received: ${tab}.`,
+        { file }
+      )
+      return
+    }
+
+    const zone = zoneProperty.value.value
+    const fullPath = getFormEntryFieldPath(model, zone, tab)
+
+    if (
+      !isValidCustomFieldFormZone(zone) ||
+      !isValidCustomFieldFormFieldPath(fullPath)
+    ) {
+      logger.warn(
+        `'zone' and 'tab' properties at the ${j} index of the 'forms' property are not a valid for the '${model}' model. Received: { zone: ${zone}, tab: ${tab} }.`,
+        { file }
+      )
+      return
+    }
+
+    const fieldsObject = element.properties.find(
+      (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "fields" })
+    ) as ObjectProperty | undefined
+
+    if (!fieldsObject) {
+      logger.warn(
+        `The 'fields' property is missing at the ${j} index of the 'forms' property. The 'fields' property is required to load a custom field form.`,
+        { file }
+      )
+      return
+    }
+
+    const fields: CustomFieldFormField[] = []
+
+    if (!isObjectExpression(fieldsObject.value)) {
+      logger.warn(
+        `The 'fields' property at the ${j} index of the 'forms' property is malformed. The 'fields' property must be an object.`,
+        { file }
+      )
+      return
+    }
+
+    fieldsObject.value.properties.forEach((field) => {
+      if (!isObjectProperty(field) || !isIdentifier(field.key)) {
+        return
+      }
+
+      const name = field.key.name
+
+      if (
+        !isObjectExpression(field.value) &&
+        !(
+          isCallExpression(field.value) &&
+          isMemberExpression(field.value.callee) &&
+          isIdentifier(field.value.callee.object) &&
+          isIdentifier(field.value.callee.property) &&
+          field.value.callee.object.name === "form" &&
+          field.value.callee.property.name === "define" &&
+          field.value.arguments.length === 1 &&
+          isObjectExpression(field.value.arguments[0])
+        )
+      ) {
+        logger.warn(
+          `'${name}' property in the 'fields' property at the ${j} index of the 'forms' property in ${file} is malformed. The property must be an object or a call to form.define().`,
+          { file }
+        )
+        return
+      }
+
+      const fieldObject = isObjectExpression(field.value)
+        ? field.value
+        : (field.value.arguments[0] as ObjectExpression)
+
+      const labelProperty = fieldObject.properties.find(
+        (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "label" })
+      ) as ObjectProperty | undefined
+
+      const descriptionProperty = fieldObject.properties.find(
+        (p) =>
+          isObjectProperty(p) && isIdentifier(p.key, { name: "description" })
+      ) as ObjectProperty | undefined
+
+      const componentProperty = fieldObject.properties.find(
+        (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "component" })
+      ) as ObjectProperty | undefined
+
+      const validationProperty = fieldObject.properties.find(
+        (p) =>
+          isObjectProperty(p) && isIdentifier(p.key, { name: "validation" })
+      ) as ObjectProperty | undefined
+
+      const placeholderProperty = fieldObject.properties.find(
+        (p) =>
+          isObjectProperty(p) && isIdentifier(p.key, { name: "placeholder" })
+      ) as ObjectProperty | undefined
+
+      const label = getFormFieldSectionValue(
+        !!labelProperty,
+        index,
+        j,
+        name,
+        "label"
+      )
+      const description = getFormFieldSectionValue(
+        !!descriptionProperty,
+        index,
+        j,
+        name,
+        "description"
+      )
+      const placeholder = getFormFieldSectionValue(
+        !!placeholderProperty,
+        index,
+        j,
+        name,
+        "placeholder"
+      )
+      const component = getFormFieldSectionValue(
+        !!componentProperty,
+        index,
+        j,
+        name,
+        "component"
+      )
+      const validation = getFormFieldSectionValue(
+        !!validationProperty,
+        index,
+        j,
+        name,
+        "validation"
+      )
+
+      fields.push({
+        name,
+        label,
+        description,
+        Component: component,
+        validation,
+        placeholder,
+      })
+    })
+
+    forms.push({
+      zone,
+      tab: tab as CustomFieldFormTab | undefined,
+      fields,
+    })
+  })
+
+  return forms.length > 0 ? forms : null
+}
+
+function getFormFieldSectionValue(
+  exists: boolean,
+  fileIndex: number,
+  formIndex: number,
+  fieldKey: string,
+  value: string
+): string {
+  if (!exists) {
+    return "undefined"
+  }
+
+  const import_ = generateCustomFieldConfigName(fileIndex)
+  return `${import_}.forms[${formIndex}].fields.${fieldKey}.${value}`
+}
+
+function getFormEntryFieldPath(
+  model: CustomFieldModel,
+  zone: string,
+  tab?: string
+): string {
+  return `${model}.${zone}.${tab ? `${tab}.` : ""}$field`
+}
+
+function getConfigs(
+  path: NodePath<ExportDefaultDeclaration>,
+  model: CustomFieldModel,
+  index: number,
+  file: string
+): CustomFieldConfig[] | null {
+  const formArray = getFormsArgument(path, file)
+
+  if (!formArray) {
+    logger.warn(`'forms' property is missing.`, { file })
+    return null
+  }
+
+  const configs: CustomFieldConfig[] = []
+
+  formArray.elements.forEach((element, j) => {
+    if (!isObjectExpression(element)) {
+      logger.warn(
+        `'forms' property at the ${j} index is malformed. The 'forms' property must be an object.`,
+        { file }
+      )
+      return
+    }
+
+    const zoneProperty = element.properties.find(
+      (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "zone" })
+    ) as ObjectProperty | undefined
+
+    if (!zoneProperty) {
+      logger.warn(
+        `'zone' property is missing from the ${j} index of the 'forms' property.`,
+        { file }
+      )
+      return
+    }
+
+    if (isTemplateLiteral(zoneProperty.value)) {
+      logger.warn(
+        `'zone' property at the ${j} index of the 'forms' property cannot be a template literal (e.g. \`general\`).`,
+        { file }
+      )
+      return
+    }
+
+    if (!isStringLiteral(zoneProperty.value)) {
+      logger.warn(
+        `'zone' property at the ${j} index of the 'forms' property is not a string literal (e.g. 'general' or 'attributes').`,
+        { file }
+      )
+      return
+    }
+
+    const zone = zoneProperty.value.value
+    const fullPath = getFormEntryConfigPath(model, zone)
+
+    if (
+      !isValidCustomFieldFormZone(zone) ||
+      !isValidCustomFieldFormConfigPath(fullPath)
+    ) {
+      logger.warn(
+        `'zone' property at the ${j} index of the 'forms' property is not a valid custom field form zone for the '${model}' model. Received: ${zone}.`
+      )
+      return
+    }
+
+    const fieldsObject = element.properties.find(
+      (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "fields" })
+    ) as ObjectProperty | undefined
+
+    if (!fieldsObject) {
+      logger.warn(
+        `'fields' property is missing from the ${j} entry in the 'forms' property in ${file}.`,
+        { file }
+      )
+      return
+    }
+
+    const fields: CustomFieldConfigField[] = []
+
+    if (!isObjectExpression(fieldsObject.value)) {
+      logger.warn(
+        `'fields' property at the ${j} index of the 'forms' property is malformed. The 'fields' property must be an object.`,
+        { file }
+      )
+      return
+    }
+
+    fieldsObject.value.properties.forEach((field) => {
+      if (!isObjectProperty(field) || !isIdentifier(field.key)) {
+        return
+      }
+
+      const name = field.key.name
+
+      if (
+        !isObjectExpression(field.value) &&
+        !(
+          isCallExpression(field.value) &&
+          isMemberExpression(field.value.callee) &&
+          isIdentifier(field.value.callee.object) &&
+          isIdentifier(field.value.callee.property) &&
+          field.value.callee.object.name === "form" &&
+          field.value.callee.property.name === "define" &&
+          field.value.arguments.length === 1 &&
+          isObjectExpression(field.value.arguments[0])
+        )
+      ) {
+        logger.warn(
+          `'${name}' property in the 'fields' property at the ${j} index of the 'forms' property in ${file} is malformed. The property must be an object or a call to form.define().`,
+          { file }
+        )
+        return
+      }
+
+      const fieldObject = isObjectExpression(field.value)
+        ? field.value
+        : (field.value.arguments[0] as ObjectExpression)
+
+      const defaultValueProperty = fieldObject.properties.find(
+        (p) =>
+          isObjectProperty(p) && isIdentifier(p.key, { name: "defaultValue" })
+      ) as ObjectProperty | undefined
+
+      if (!defaultValueProperty) {
+        logger.warn(
+          `'defaultValue' property is missing at the ${j} index of the 'forms' property in ${file}.`,
+          { file }
+        )
+        return
+      }
+
+      const validationProperty = fieldObject.properties.find(
+        (p) =>
+          isObjectProperty(p) && isIdentifier(p.key, { name: "validation" })
+      ) as ObjectProperty | undefined
+
+      if (!validationProperty) {
+        logger.warn(
+          `'validation' property is missing at the ${j} index of the 'forms' property in ${file}.`,
+          { file }
+        )
+        return
+      }
+
+      const defaultValue = getFormFieldValue(index, j, name, "defaultValue")
+      const validation = getFormFieldValue(index, j, name, "validation")
+
+      fields.push({
+        name,
+        defaultValue,
+        validation,
+      })
+    })
+
+    configs.push({
+      zone: zone,
+      fields,
+    })
+  })
+
+  return configs.length > 0 ? configs : null
+}
+
+function getFormFieldValue(
+  fileIndex: number,
+  formIndex: number,
+  fieldKey: string,
+  value: string
+): string {
+  const import_ = generateCustomFieldConfigName(fileIndex)
+  return `${import_}.forms[${formIndex}].fields.${fieldKey}.${value}`
+}
+
+function getFormEntryConfigPath(model: CustomFieldModel, zone: string): string {
+  return `${model}.${zone}.$config`
+}
+
+function getFormsArgument(
+  path: NodePath<ExportDefaultDeclaration>,
+  file: string
+): ArrayExpression | null {
+  const configArgument = getConfigArgument(path)
+
+  if (!configArgument) {
+    return null
+  }
+
+  const formProperty = configArgument.properties.find(
+    (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "forms" })
+  ) as ObjectProperty | undefined
+
+  if (!formProperty) {
+    return null
+  }
+
+  if (!isArrayExpression(formProperty.value)) {
+    logger.warn(
+      `The 'forms' property is malformed. The 'forms' property must be an array of objects.`,
+      { file }
+    )
+    return null
+  }
+
+  return formProperty.value
+}

packages/admin/admin-vite-plugin/src/custom-fields/generate-custom-field-hashes.ts

@@ -0,0 +1,86 @@
+import fs from "fs/promises"
+import { isIdentifier, isObjectProperty, parse, traverse } from "../babel"
+import { logger } from "../logger"
+import { crawl, generateHash, getParserOptions } from "../utils"
+import { getConfigArgument } from "./helpers"
+
+export async function generateCustomFieldHashes(
+  sources: Set<string>
+): Promise<{ linkHash: string; formHash: string; displayHash: string }> {
+  const files = await getFilesFromSources(sources)
+  const contents = await Promise.all(files.map(getCustomFieldContents))
+
+  const linkContents = contents.map((c) => c.link).filter(Boolean)
+  const formContents = contents.map((c) => c.form).filter(Boolean)
+  const displayContents = contents.map((c) => c.display).filter(Boolean)
+
+  const totalLinkContent = linkContents.join("")
+  const totalFormContent = formContents.join("")
+  const totalDisplayContent = displayContents.join("")
+
+  return {
+    linkHash: generateHash(totalLinkContent),
+    formHash: generateHash(totalFormContent),
+    displayHash: generateHash(totalDisplayContent),
+  }
+}
+
+async function getFilesFromSources(sources: Set<string>): Promise<string[]> {
+  return (
+    await Promise.all(
+      Array.from(sources).map(async (source) =>
+        crawl(`${source}/custom-fields`)
+      )
+    )
+  ).flat()
+}
+
+async function getCustomFieldContents(file: string): Promise<{
+  link: string | null
+  form: string | null
+  display: string | null
+}> {
+  const code = await fs.readFile(file, "utf-8")
+  const ast = parse(code, getParserOptions(file))
+
+  let linkContent: string | null = null
+  let formContent: string | null = null
+  let displayContent: string | null = null
+
+  try {
+    traverse(ast, {
+      ExportDefaultDeclaration(path) {
+        const configArgument = getConfigArgument(path)
+        if (!configArgument) {
+          return
+        }
+
+        configArgument.properties.forEach((prop) => {
+          if (!isObjectProperty(prop) || !prop.key || !isIdentifier(prop.key)) {
+            return
+          }
+
+          switch (prop.key.name) {
+            case "link":
+              linkContent = code.slice(prop.start!, prop.end!)
+              break
+            case "forms":
+              formContent = code.slice(prop.start!, prop.end!)
+              break
+            case "display":
+              displayContent = code.slice(prop.start!, prop.end!)
+              break
+          }
+        })
+      },
+    })
+  } catch (e) {
+    logger.error(
+      `An error occurred while processing ${file}. See the below error for more details:\n${e}`,
+      { file, error: e }
+    )
+    return { link: null, form: null, display: null }
+  }
+
+  return { link: linkContent, form: formContent, display: displayContent }
+}

packages/admin/admin-vite-plugin/src/custom-fields/generate-custom-field-links.ts

@@ -0,0 +1,167 @@
+import { CustomFieldModel } from "@medusajs/admin-shared"
+import fs from "fs/promises"
+import {
+  ExportDefaultDeclaration,
+  File,
+  isIdentifier,
+  isObjectProperty,
+  NodePath,
+  ObjectProperty,
+  parse,
+  ParseResult,
+  traverse,
+} from "../babel"
+import { logger } from "../logger"
+import { crawl, getParserOptions } from "../utils"
+import { getConfigArgument, getModel } from "./helpers"
+
+type ParsedCustomFieldLink = {
+  import: string
+  model: CustomFieldModel
+  link: string
+}
+
+export async function generateCustomFieldLinks(sources: Set<string>) {
+  const files = await getFilesFromSources(sources)
+  const results = await getCustomFieldLinkResults(files)
+
+  const imports = results.map((result) => result.import)
+  const code = generateCode(results)
+
+  return {
+    imports,
+    code,
+  }
+}
+
+async function getFilesFromSources(sources: Set<string>): Promise<string[]> {
+  const files = (
+    await Promise.all(
+      Array.from(sources).map(async (source) =>
+        crawl(`${source}/custom-fields`)
+      )
+    )
+  ).flat()
+  return files
+}
+
+function generateCode(results: ParsedCustomFieldLink[]): string {
+  const groupedByModel = new Map<CustomFieldModel, ParsedCustomFieldLink[]>()
+
+  results.forEach((result) => {
+    const model = result.model
+    if (!groupedByModel.has(model)) {
+      groupedByModel.set(model, [])
+    }
+    groupedByModel.get(model)!.push(result)
+  })
+
+  const segments: string[] = []
+
+  groupedByModel.forEach((results, model) => {
+    const links = results.map((result) => result.link).join(",\n")
+
+    segments.push(`
+      ${model}: [
+        ${links}
+      ],
+    `)
+  })
+
+  return `
+    links: {
+      ${segments.join("\n")}
+    }
+  `
+}
+
+async function getCustomFieldLinkResults(
+  files: string[]
+): Promise<ParsedCustomFieldLink[]> {
+  return (
+    await Promise.all(files.map(async (file, index) => parseFile(file, index)))
+  ).filter(Boolean) as ParsedCustomFieldLink[]
+}
+
+async function parseFile(
+  file: string,
+  index: number
+): Promise<ParsedCustomFieldLink | null> {
+  const content = await fs.readFile(file, "utf8")
+  let ast: ParseResult<File>
+
+  try {
+    ast = parse(content, getParserOptions(file))
+  } catch (e) {
+    logger.error(`An error occurred while parsing the file`, { file, error: e })
+    return null
+  }
+
+  const import_ = generateImport(file, index)
+
+  let link: string | null = null
+  let model: CustomFieldModel | null = null
+  try {
+    traverse(ast, {
+      ExportDefaultDeclaration(path) {
+        const _model = getModel(path, file)
+
+        if (!_model) {
+          return
+        }
+
+        model = _model
+        link = getLink(path, index, file)
+      },
+    })
+  } catch (err) {
+    logger.error(`An error occurred while traversing the file.`, {
+      file,
+      error: err,
+    })
+    return null
+  }
+
+  if (!link || !model) {
+    return null
+  }
+
+  return {
+    import: import_,
+    model,
+    link,
+  }
+}
+
+function generateCustomFieldConfigName(index: number): string {
+  return `CustomFieldConfig${index}`
+}
+
+function generateImport(file: string, index: number): string {
+  return `import ${generateCustomFieldConfigName(index)} from "${file}"`
+}
+
+function getLink(
+  path: NodePath<ExportDefaultDeclaration>,
+  index: number,
+  file: string
+): string | null {
+  const configArgument = getConfigArgument(path)
+
+  if (!configArgument) {
+    return null
+  }
+
+  const linkProperty = configArgument.properties.find(
+    (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "link" })
+  ) as ObjectProperty | undefined
+
+  if (!linkProperty) {
+    logger.warn(`'link' is missing.`, { file })
+    return null
+  }
+
+  const import_ = generateCustomFieldConfigName(index)
+
+  return `${import_}.link`
+}

packages/admin/admin-vite-plugin/src/custom-fields/helpers.ts

@@ -0,0 +1,116 @@
+import {
+  CustomFieldModel,
+  isValidCustomFieldModel,
+} from "@medusajs/admin-shared"
+import {
+  ExportDefaultDeclaration,
+  isCallExpression,
+  isIdentifier,
+  isObjectExpression,
+  isObjectProperty,
+  isStringLiteral,
+  isTemplateLiteral,
+  NodePath,
+  ObjectExpression,
+  ObjectProperty,
+} from "../babel"
+import { logger } from "../logger"
+
+export function getModel(
+  path: NodePath<ExportDefaultDeclaration>,
+  file: string
+): CustomFieldModel | null {
+  const configArgument = getConfigArgument(path)
+
+  if (!configArgument) {
+    return null
+  }
+
+  const modelProperty = configArgument.properties.find(
+    (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "model" })
+  ) as ObjectProperty | undefined
+
+  if (!modelProperty) {
+    return null
+  }
+
+  if (isTemplateLiteral(modelProperty.value)) {
+    logger.warn(
+      `'model' property cannot be a template literal (e.g. \`product\`).`,
+      { file }
+    )
+    return null
+  }
+
+  if (!isStringLiteral(modelProperty.value)) {
+    logger.warn(
+      `'model' is invalid. The 'model' property must be a string literal, e.g. 'product' or 'customer'.`,
+      { file }
+    )
+    return null
+  }
+
+  const model = modelProperty.value.value.trim()
+
+  if (!isValidCustomFieldModel(model)) {
+    logger.warn(
+      `'model' is invalid, received: ${model}. The 'model' property must be set to a valid model, e.g. 'product' or 'customer'.`,
+      { file }
+    )
+    return null
+  }
+
+  return model
+}
+
+export function getConfigArgument(
+  path: NodePath<ExportDefaultDeclaration>
+): ObjectExpression | null {
+  if (!isCallExpression(path.node.declaration)) {
+    return null
+  }
+
+  if (
+    !isIdentifier(path.node.declaration.callee, {
+      name: "unstable_defineCustomFieldsConfig",
+    })
+  ) {
+    return null
+  }
+
+  const configArgument = path.node.declaration.arguments[0]
+
+  if (!isObjectExpression(configArgument)) {
+    return null
+  }
+
+  return configArgument
+}
+
+/**
+ * Validates that the 'link' property is present in the custom field config.
+ * @param path - The NodePath to the export default declaration.
+ * @param file - The file path.
+ * @returns - True if the 'link' property is present, false otherwise.
+ */
+export function validateLink(
+  path: NodePath<ExportDefaultDeclaration>,
+  file: string
+): boolean {
+  const configArgument = getConfigArgument(path)
+
+  if (!configArgument) {
+    return false
+  }
+
+  const linkProperty = configArgument.properties.find(
+    (p) => isObjectProperty(p) && isIdentifier(p.key, { name: "link" })
+  ) as ObjectProperty | undefined
+
+  if (!linkProperty) {
+    logger.warn(`'link' property is missing.`, { file })
+    return false
+  }
+
+  return true
+}

packages/admin/admin-vite-plugin/src/custom-fields/index.ts

@@ -0,0 +1,4 @@
+export * from "./generate-custom-field-displays"
+export * from "./generate-custom-field-forms"
+export * from "./generate-custom-field-hashes"
+export * from "./generate-custom-field-links"