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(),
  ],
});

[kemo-1]

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(),
  ],
});

thank you so much i spent the last 5 hours converting my website from markdocto mdx and i couldn't get it to build loll a problem after a problem but now i finally got it working i was stuck at the global import part

this code fixed it (apperantly i needed to import mdx and put it after starlight

also i made the dir for global imports

const componentDir = './src/components/global/'; 

(Helping you with something random you might find usefull)

i found a way to use sed tool to replace custom chars with mdx/mdoc components

<Question> what is astro?

a space station

a JavaScript framework 

a JavaScript runtime

</Question>

this component is easy enough to use and i wanted it to be super easy so i did this

#Question What is astro?

a space station

a JavaScript framework 

a JavaScript runtime

#QuestionEnd

i tell sed to Replace #Question with <Question>

this is usefull when you have non programmers on your editor team