Support remark-code-import by passing file metadata during parser creation

[JessicaSachs]

Support remark-code-import by passing file metadata during parser creation

Description

When attempting to use the remark-code-import plugin with code snippet imports using the file syntax:

```js file=./myFile.js
```

The plugin fails to resolve files because the primary file object passed to the parser lacks the necessary pathing information required by the remark vfile object.

Current Behavior

• The plugin throws an error when attempting to resolve imported code files
• Error message indicates missing VFile context:

if (!file.dirname) {
  throw new Error('"file" should be an instance of VFile');
}

Expected Behavior

• The parser should properly resolve and import code files when using the remark-code-import syntax
• File paths should be correctly resolved relative to the source markdown file

Fix

Pretty sure the issue is in createMarkdownParser - we just need to pass more context to the unified processor so it can create a proper VFile with the dirname (and other important bits) set.

This is probably breaking other remark plugins too since quite a few of them need proper VFile metadata to resolve paths and do filesystem operations. remark-code-import is just where I happened to notice it.

Steps to Reproduce

1. Install and configure Nuxt MDC with remark-code-import
2. Create a markdown file with a code import directive
3. Attempt to build/process the markdown file
4. Observe the VFile error

[JessicaSachs]

Oh. It looks like createMarkdownParser doesn't have any of the file information handy to pass along in that function's scope.

[JessicaSachs]

Oh. Yeah this isn't straightforward. How would we go about adding file path context so that these plugins could be processed?

https://github.com/nuxt-modules/mdc/blob/main/src/runtime/components/MDC.vue#L2-L25

  <slot
    :data="data?.data"
    :body="data?.body"
    :toc="data?.toc"
    :excerpt="data?.excerpt"
    :error="error"
  >
    <MDCRenderer
      v-if="body"
      :tag="props.tag"
      :class="props.class"
      :body="body"
      :data="data?.data"
      :unwrap="props.unwrap"
    />
  </slot>
</template>


<script setup lang="ts">
import { hash } from 'ohash'
import { useAsyncData } from 'nuxt/app'
import { watch, computed, type PropType } from 'vue'
import type { MDCParseOptions } from '@nuxtjs/mdc'
import { parseMarkdown } from '../parser'
</script>