npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

astro-auto-import

v0.4.4

Published

Auto-import components in Astro projects

Downloads

59,574

Readme

astro-auto-import

This an Astro integration that allows you to auto-import components or other modules and access them in MDX files without importing them.

Installation

npm i astro-auto-import

If you aren’t already using MDX, you’ll need to add it too:

npx astro add mdx

Usage

Import the integration and add it to your astro.config.* file:

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

export default defineConfig({
  integrations: [
    AutoImport({
      imports: [
        // Import a component’s default export
        // generates:
        // import A from './src/components/A.astro';
        './src/components/A.astro',

        {
          // Explicitly alias a default export
          // generates:
          // import { default as B } from './src/components/B.astro';
          './src/components/B.astro': [['default', 'B']],

          // Import a module’s named exports
          // generates:
          // import { Tweet, YouTube } from 'astro-embed';
          'astro-embed': ['Tweet', 'YouTube'],

          // Import all named exports from a module as a namespace
          // generates:
          // import * as Components from './src/components';
          './src/components': 'Components',
        },
      ],
    }),

    // Make sure the MDX integration is included AFTER astro-auto-import
    mdx(),
  ],
});

Options

imports

Type: (string | Record<string, (string | [string, string])[]>)[]

An array of items that configure what files are imported and how.

Default exports

For Astro components or other files that have a default export, the easiest option is to provide their path and they will be imported with a name based on the file name.

imports: ['./src/components/A.astro', './src/components/react/ReactComponent.tsx'];

The above config will import A and ReactComponent respectively, so they could be used as <A /> or <ReactComponent />.

Equivalent to
import A from './src/components/A.astro';
import ReactComponent from './src/components/react/ReactComponent.tsx';
Named exports

For script modules or component frameworks that can use named exports, you can pass an object mapping the module to the names you want to import.

imports: [
  {
    'astro-embed': ['Twitter', 'YouTube'],
  },
];

This config will import both the Twitter and YouTube components from the astro-embed package.

Equivalent to
import { Twitter, YouTube } from 'astro-embed';

Import aliasing

In some cases you may want to alias a default or named export to a different name either for convenience or to avoid conflicts. In this case instead of passing strings, you can pass a tuple of ['original-name', 'alias'].

imports: [
  {
    './src/components/B.astro': [['default', 'RenamedB']],
  },
];

This config will import the Astro component in src/components/B.astro but make it available as <RenamedB />.

Equivalent to
import { default as RenamedB } from './src/components/B.astro';

Namespace import

If you want to import all the named exports in a file to a namespace, you can pass a string to set the namespace to import to:

imports: [
  {
    './src/components/index': 'Components',
  },
];

This config would import all the components in an index file, making them available as <Components.A />, <Components.B /> etc.

Equivalent to
import * as Components from './src/components/index';

License

MIT