Function createAssetsExportCode

packages/docusaurus-mdx-loader/src/utils.ts:23–68

({
  assets,
  inlineMarkdownAssetImageFileLoader,
}: {
  assets: unknown;
  inlineMarkdownAssetImageFileLoader: string;
})

 * `{image: "./myImage.png"}` => `{image: require("./myImage.png")}`
 */
export function createAssetsExportCode({
  assets,
  inlineMarkdownAssetImageFileLoader,
}: {
  assets: unknown;
  inlineMarkdownAssetImageFileLoader: string;
}): string {
  if (
    typeof assets !== 'object' ||
    !assets ||
    Object.keys(assets).length === 0
  ) {
    return 'undefined';
  }

  // TODO implementation can be completed/enhanced
  function createAssetValueCode(assetValue: unknown): string | undefined {
    if (Array.isArray(assetValue)) {
      const arrayItemCodes = assetValue.map(
        (item: unknown) => createAssetValueCode(item) ?? 'undefined',
      );
      return `[${arrayItemCodes.join(', ')}]`;
    }
    // Only process string values starting with ./
    // We could enhance this logic and check if file exists on disc?
    if (typeof assetValue === 'string' && assetValue.startsWith('./')) {
      // TODO do we have other use-cases than image assets?
      // Probably not worth adding more support, as we want to move to Webpack 5 new asset system (https://github.com/facebook/docusaurus/pull/4708)
      return `require("${inlineMarkdownAssetImageFileLoader}${escapePath(
        assetValue,
      )}").default`;
    }
    return undefined;
  }

  const assetEntries = Object.entries(assets);

  const codeLines = assetEntries
    .map(([key, value]: [string, unknown]) => {
      const assetRequireCode = createAssetValueCode(value);
      return assetRequireCode ? `"${key}": ${assetRequireCode},` : undefined;
    })
    .filter(Boolean);

  return `{\n${codeLines.join('\n')}\n}`;
}

/**
 * data.contentTitle is set by the remark contentTitle plugin