fix: respect the loader set in esbuild config (#39)

* fix: respect the loader set in esbuild config, closes #38

* fix: update to xdm 1.9.0, resolves #35

* chore: fix linting and add assertion to test

Author: Arcath

package.json

@@ -40,7 +40,7 @@
     "validate": "kcd-scripts validate"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.17",
+    "@babel/runtime": "^7.14.0",
     "@esbuild-plugins/node-resolve": "^0.1.4",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.1",
     "esbuild": "^0.11.16",
@@ -49,7 +49,7 @@
     "remark-frontmatter": "^3.0.0",
     "remark-mdx-frontmatter": "^1.0.1",
     "uvu": "^0.5.1",
-    "xdm": "^1.8.0"
+    "xdm": "^1.9.0"
   },
   "devDependencies": {
     "@testing-library/react": "^11.2.6",

src/__tests__/index.js

@@ -1,11 +1,11 @@
 import './setup-tests.js'
+import path from 'path'
 import {test} from 'uvu'
 import * as assert from 'uvu/assert'
 import React from 'react'
 import rtl from '@testing-library/react'
 import leftPad from 'left-pad'
 import {remarkMdxImages} from 'remark-mdx-images'
-import path from 'path'
 import {bundleMDX} from '../index.js'
 import {getMDXComponent} from '../client.js'
 
@@ -252,6 +252,44 @@ import LeftPad from 'left-pad-js'
   assert.match(container.innerHTML, 'this is left pad')
 })
 
+test('should respect the configured loader for files', async () => {
+  const mdxSource = `
+# Title
+
+import {Demo} from './demo'
+
+<Demo />
+  `.trim()
+
+  const files = {
+    './demo.ts': `
+import React from 'react'
+
+export const Demo: React.FC = () => { 
+  return <p>Sample</p>
+}
+    `.trim(),
+  }
+
+  const {code} = await bundleMDX(mdxSource, {
+    files,
+    esbuildOptions: options => {
+      options.loader = {
+        ...options.loader,
+        '.ts': 'tsx',
+      }
+
+      return options
+    },
+  })
+
+  const Component = getMDXComponent(code)
+
+  const {container} = render(React.createElement(Component))
+
+  assert.match(container.innerHTML, 'Sample')
+})
+
 test('require from current directory', async () => {
   const mdxSource = `
 # Title

src/index.js

@@ -104,9 +104,21 @@ async function bundleMDX(
             return {contents: vfile.toString(), loader: 'jsx'}
           }
           default: {
+            /** @type import('esbuild').Loader */
+            let loader
+
+            if (
+              build.initialOptions.loader &&
+              build.initialOptions.loader[`.${fileType}`]
+            ) {
+              loader = build.initialOptions.loader[`.${fileType}`]
+            } else {
+              loader = /** @type import('esbuild').Loader */ (fileType)
+            }
+
             return {
               contents,
-              loader: /** @type import('esbuild').Loader */ (fileType),
+              loader,
             }
           }
         }