feat: Add astro-auto-import package for automatic component imports

adrian-ub · Jul 29, 2024 · 7634302 · 7634302
1 parent e7b5b25
commit 7634302
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 8 deletions.
diff --git a/apps/www/astro.config.mjs b/apps/www/astro.config.mjs
@@ -4,9 +4,10 @@ import tailwind from "@astrojs/tailwind";
 import angular from "@analogjs/astro-angular";
 import { siteConfig } from "./src/config/site";
 import theme from "./src/lib/highlighter-theme.json";
-
 import simpleStackQuery from "simple-stack-query";
 
+import AutoImport from "astro-auto-import";
+
 // https://astro.build/config
 export default defineConfig({
   site: siteConfig.url,
@@ -59,6 +60,12 @@ export default defineConfig({
         PageFrame: "./src/components/starlight/PageFrame.astro",
       },
     }),
+    AutoImport({
+      imports: [
+        "@/components/ComponentPreview/ComponentPreview.astro",
+        "@/components/ComponentSource.astro",
+      ],
+    }),
     tailwind(),
     angular(),
     simpleStackQuery(),

diff --git a/apps/www/package.json b/apps/www/package.json
@@ -33,6 +33,7 @@
     "@pagefind/default-ui": "^1.1.0",
     "@radix-ng/primitives": "^0.8.2",
     "astro": "^4.12.2",
+    "astro-auto-import": "^0.4.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lodash.template": "^4.5.0",

diff --git a/...www/src/components/ComponentPreview.astro → ...s/ComponentPreview/ComponentPreview.astro b/...www/src/components/ComponentPreview.astro → ...s/ComponentPreview/ComponentPreview.astro
@@ -21,7 +21,7 @@ const components = await Promise.all(
       `${name}.ts`
     );
     const Component = (
-      await import(`../registry/${style.name}/example/${name}.ts`)
+      await import(`../../registry/${style.name}/example/${name}.ts`)
     ).default;
     const code = readFileSync(`${filename}`)
       .toString()

diff --git a/apps/www/src/content/docs/docs/components/alert.mdx b/apps/www/src/content/docs/docs/components/alert.mdx
@@ -5,8 +5,6 @@ description: Displays a callout for user attention.
 
 import { Tabs, TabItem } from "@astrojs/starlight/components";
 import { Steps } from "@astrojs/starlight/components";
-import ComponentPreview from "@/components/ComponentPreview.astro";
-import ComponentSource from "@/components/ComponentSource.astro";
 
 <ComponentPreview name="alert-demo" />
 

diff --git a/apps/www/src/content/docs/docs/components/badge.mdx b/apps/www/src/content/docs/docs/components/badge.mdx
@@ -3,10 +3,8 @@ title: Badge
 description: Displays a badge or a component that looks like a badge.
 ---
 
-import ComponentPreview from "@/components/ComponentPreview.astro";
 import { Steps } from "@astrojs/starlight/components";
 import { Tabs, TabItem, Code } from "@astrojs/starlight/components";
-import ComponentSource from "@/components/ComponentSource.astro";
 
 <ComponentPreview name="badge-demo" />
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml