Import globs?

[jonsage]

It would be great to be able to import using globs like so:

AutoImport({
  imports: [
    // '@components/Form.astro',
    // '@components/Radio.astro',
    '@components/*',
    // '@includes/Intro.md,
    // '@includes/About.astro',
    '@includes/*'
  ],
})

And still use the same way:

<Form>
  <Radio/>
</Form>

I attempted to create something using Vite's glob-import but couldn't get it work :/

[delucis]

Interesting. A bit similar to the request in #13. I wonder how feasible this is. Currently this plug-in is pretty dumb: it doesn't do any resolution or anything, just maps config to injected import statements. For glob-style imports to work, we'd probably need have a way of discovering what is available at *. Not sure how we'd do that off the top of my head, but maybe someone has an idea!

[marfalkov]

@delucis

Interesting. A bit similar to the request in #13. I wonder how feasible this is. Currently this plug-in is pretty dumb: it doesn't do any resolution or anything, just maps config to injected import statements. For glob-style imports to work, we'd probably need have a way of discovering what is available at *. Not sure how we'd do that off the top of my head, but maybe someone has an idea!

There is ‘unjs/unimport’. They have presets for a couple of frameworks. Might be a good idea to just add an Astro preset.

[delucis]

Interesting! Does that support MDX do you know? We need to inject import nodes into the MDX syntax tree. But even if they don't, their scanning behaviour could maybe be the basis for something like this feature?

I won't have much time to look into this but if anyone wants to try something, I'll be happy to look at a PR or answer any questions.

[marfalkov]

Interesting! Does that support MDX do you know? We need to inject import nodes into the MDX syntax tree. But even if they don't, their scanning behaviour could maybe be the basis for something like this feature?

I won't have much time to look into this but if anyone wants to try something, I'll be happy to look at a PR or answer any questions.

Unfortunately it does not: Doesn't work with Astro MDX #293

[delucis]

Btw, just a thought for anyone coming across this thread, I think you can probably get a decent way towards this manually:

import { defineConfig } from 'astro/config';
import AutoImport from 'astro-auto-import';
import mdx from '@astrojs/mdx';

import { readdirSync } from 'node:fs';

// Get a list of all the components in a specific directory:
const componentDir = './src/components/';
const components = readdirSync(componentDir);

export default defineConfig({
  integrations: [
    AutoImport({
      imports: [
        // Add paths to each component to the auto-import array:
        ...components.map(filename => componentDir + filename),
      ],
    }),

    mdx(),
  ],
});