Hi, I’m Chris (he/him) 👋
delucis / astro-auto-import Goto Github PK
View Code? Open in Web Editor NEWAuto-import components in Astro projects
Auto-import components in Astro projects
Currently getting peer conflicts when building using Astro v2.0.0-beta.2
due to ^1.0.0
peer dependency.
With this plugin configured on Astro v2.7.0 and Starlight v.5.6, everything worked. When I updated Astro and Starlight, without any config changes, the plugin stopped working.
Is it possible to use this package with Starlight? I was reading through Astro's Discord where people were recommending this but I could not make this work.
Here is a link to a basic repro: https://stackblitz.com/edit/github-rbo2vn?file=src%2Fcontent%2Fdocs%2Fguides%2Fexample.mdx
Any help is appreciated! Thanks for the great package!
Kizu wrote this https://blog.kizu.dev/astro-mdx-components/ and I recommend he take a look at your integration to simplify things, however the part I think your integration doesn't handle when it comes to overriding default HTML elements in MDX is the export step.
I was wondering whether it would be simple to extend functionality to AutoImport to both import and re-export components for MDX and this way it would possible to provide overrides for HTML elements like <a>
and <h1>
etc.
It would be nice to work with MDOC files too.
In this case we can use Keystatic CMS admin and easy global import of components.
When runing the "astro build" command, i get the following error message in the console
[astro:jsx] /path/to/project/src/pages/page-quizz.mdx: Could not render `Quiz`. No matching import has been found for `Quiz`.
It used to work under Astro 2.1
If i import manually the "Quizz" component, i don't get the error...
When using AutoImport
and Starlight
, AutoImport
must be placed after the Starlight integration in order to function properly. However, the package throws a warning in the console:
[auto-import]
⚠️ @astrojs/mdx initialized BEFORE astro-auto-import.
Auto imports in .mdx files won’t work!
Move the MDX integration after auto-import in your integrations array in astro.config.
Starlight initializes MDX automatically, and auto-importing seems to work fine when placed afterwards.
https://stackblitz.com/edit/github-jqmc1e?file=astro.config.mjs
(Thanks Chris!)
I’d love to be able to point this at an entire directory or subdirectory and have all the components in that directory be namespaced, so something like this:
imports: [
{
'./src/components/atoms/*': ‘Atoms',
},
];
and then use them like <Atoms.MyAtom />
Basically an expansion of the current Namespace Import to support a directory of components instead of a single file with multiple modules.
In my project I have a single index.ts
file that just imports all of my separate components and then re-exports them as named exports (barrel file).
import ComponentA from "@components/ComponentA";
import ComponentB from "@components/ComponentB";
export {
ComponentA,
ComponentB
};
This way, I used to be able to use all my components through a single import statements (possibly with a TS alias), like this:
import { ComponentA, ComponentB } from "@components"
Now I want to use astro-auto-import
, and I was wondering if there is any way to auto-import all the files that get exported from my index file, without repeating/duplicating all the module names, and without prefixing them with a namespace.
I'd love to have a single source of truth for all the usable components, and I'd love it to be my index file rather than the Astro config.
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 :/
The package seems to be non-functional at the moment. The error I am getting makes me think the package is going to the base project folder, then taking into account any ../
in the file path, then removing all the slashes. So it's trying to access a non-existent folder structure.
Basic repo with issue shown is here https://github.com/Boston343/astro-auto-import-test
For this repo, the mdx file in question is using-mdx.mdx
which is the example file from astros blog starter. I removed the include that was in the file, and instead am using the AutoImport to try and add the component import into the mdx file. This throws errors.
astro.config.mjs
import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import AutoImport from "astro-auto-import";
import sitemap from "@astrojs/sitemap";
// https://astro.build/config
export default defineConfig({
site: "https://example.com",
integrations: [
AutoImport({
imports: ["../../components/HeaderLink.astro"],
}),
mdx(),
sitemap(),
],
});
The error looks like:
Cannot find module 'filePathToRepoWithoutSlashesastro-auto-import-testsrccomponentsHeaderLink.astro' imported from 'file/Path/To/Repo/With/Slashes/astro-auto-import-test/src/content/blog/using-mdx.mdx'
File:
file/Path/To/Repo/With/Slashes/astro-auto-import-test/src/content/blog/using-mdx.mdx?astroPropagatedAssets=true
Currently if I use astro-embed-integration
in astro.config.mjs
it will inject itself (CSS and JS) post compiling to every MDX file, even if there aren't any embeds in the MDX.
I propose to check for every file which would got embeds and inject proper astro-embed
plugin for each of them
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.