fix(ui): move Comments/CommentForm to emdash/ui/comments subpath (#2039)

.changeset/comments-ui-subpath.md

@@ -0,0 +1,5 @@
+---
+"emdash": minor
+---
+
+Adds `emdash/ui/comments` for `Comments` and `CommentForm` so their CSS only loads on pages that import them. Importing from `emdash/ui` still works but is deprecated and will be removed in 1.0 — prefer `import { Comments, CommentForm } from "emdash/ui/comments"`.

demos/cloudflare/src/pages/posts/[slug].astro

@@ -10,10 +10,9 @@ import {
 import {
 	Image,
 	PortableText,
-	Comments,
-	CommentForm,
 	WidgetArea,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import Base from "../../layouts/Base.astro";
 import PostCard from "../../components/PostCard.astro";
 import { getReadingTime } from "../../utils/reading-time";

demos/playground/src/pages/posts/[slug].astro

@@ -10,10 +10,9 @@ import {
 import {
 	Image,
 	PortableText,
-	Comments,
-	CommentForm,
 	WidgetArea,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import Base from "../../layouts/Base.astro";
 import PostCard from "../../components/PostCard.astro";
 import { getReadingTime } from "../../utils/reading-time";

demos/postgres/src/pages/posts/[slug].astro

@@ -10,10 +10,9 @@ import {
 import {
 	Image,
 	PortableText,
-	Comments,
-	CommentForm,
 	WidgetArea,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import Base from "../../layouts/Base.astro";
 import PostCard from "../../components/PostCard.astro";
 import { getReadingTime } from "../../utils/reading-time";

demos/preview/src/pages/posts/[slug].astro

@@ -10,10 +10,9 @@ import {
 import {
 	Image,
 	PortableText,
-	Comments,
-	CommentForm,
 	WidgetArea,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import Base from "../../layouts/Base.astro";
 import PostCard from "../../components/PostCard.astro";
 import { getReadingTime } from "../../utils/reading-time";

demos/simple/src/pages/posts/[slug].astro

@@ -10,10 +10,9 @@ import {
 import {
 	Image,
 	PortableText,
-	Comments,
-	CommentForm,
 	WidgetArea,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import Base from "../../layouts/Base.astro";
 import PostCard from "../../components/PostCard.astro";
 import { getReadingTime } from "../../utils/reading-time";

e2e/fixture-cloudflare/src/pages/posts/[slug].astro

@@ -1,6 +1,7 @@
 ---
 import { getEmDashEntry } from "emdash";
-import { PortableText, Comments, CommentForm } from "emdash/ui";
+import { PortableText } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 
 const { slug } = Astro.params;
 if (!slug) return Astro.redirect("/404");

e2e/fixture/src/pages/posts/[slug].astro

@@ -1,6 +1,7 @@
 ---
 import { getEmDashEntry } from "emdash";
-import { PortableText, Comments, CommentForm } from "emdash/ui";
+import { PortableText } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 
 const { slug } = Astro.params;
 if (!slug) return Astro.redirect("/404");

fixtures/perf-site/src/pages/posts/[slug].astro

@@ -10,10 +10,9 @@ import {
 import {
 	Image,
 	PortableText,
-	Comments,
-	CommentForm,
 	WidgetArea,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import Base from "../../layouts/Base.astro";
 import PostCard from "../../components/PostCard.astro";
 import { getReadingTime } from "../../utils/reading-time";

infra/blog-demo/src/pages/posts/[slug].astro

@@ -11,10 +11,9 @@ import {
 import {
 	Image,
 	PortableText,
-	Comments,
-	CommentForm,
 	WidgetArea,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import Base from "../../layouts/Base.astro";
 import PostCard from "../../components/PostCard.astro";
 import { getReadingTime } from "../../utils/reading-time";

infra/cache-demo/src/pages/posts/[slug].astro

@@ -11,10 +11,9 @@ import {
 import {
 	Image,
 	PortableText,
-	Comments,
-	CommentForm,
 	WidgetArea,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import Base from "../../layouts/Base.astro";
 import PostCard from "../../components/PostCard.astro";
 import { getReadingTime } from "../../utils/reading-time";

infra/do-demo/src/pages/posts/[slug].astro

@@ -11,10 +11,9 @@ import {
 import {
 	Image,
 	PortableText,
-	Comments,
-	CommentForm,
 	WidgetArea,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import Base from "../../layouts/Base.astro";
 import PostCard from "../../components/PostCard.astro";
 import { getReadingTime } from "../../utils/reading-time";

infra/do-solo-demo/src/pages/posts/[slug].astro

@@ -11,10 +11,9 @@ import {
 import {
 	Image,
 	PortableText,
-	Comments,
-	CommentForm,
 	WidgetArea,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import Base from "../../layouts/Base.astro";
 import PostCard from "../../components/PostCard.astro";
 import { getReadingTime } from "../../utils/reading-time";

packages/core/package.json

@@ -42,6 +42,7 @@
       "default": "./dist/astro/middleware/redirect.mjs"
     },
     "./ui": "./src/ui.ts",
+    "./ui/comments": "./src/ui-comments.ts",
     "./ui/search": "./src/components/LiveSearch.astro",
     "./cli": {
       "types": "./dist/cli/index.d.mts",

packages/core/src/components/CommentForm.astro

@@ -11,7 +11,7 @@
  * @example
  * ```astro
  * ---
- * import { CommentForm } from "emdash/ui";
+ * import { CommentForm } from "emdash/ui/comments";
  * ---
  * <CommentForm collection="posts" contentId={post.id} />
  * ```

packages/core/src/components/Comments.astro

@@ -8,7 +8,7 @@
  * @example
  * ```astro
  * ---
- * import { Comments } from "emdash/ui";
+ * import { Comments } from "emdash/ui/comments";
  * ---
  * <Comments collection="posts" contentId={post.id} threaded />
  * ```

packages/core/src/components/index.ts

@@ -22,8 +22,15 @@
 // Wrapper component with EmDash defaults
 export { default as PortableText } from "./PortableText.astro";
 
-// Comment components
+/**
+ * @deprecated Import from `emdash/ui/comments` instead. Barrel re-exports pull
+ * comment CSS into every page that imports `emdash/ui` (#2039). Will be removed in 1.0.
+ */
 export { default as Comments } from "./Comments.astro";
+/**
+ * @deprecated Import from `emdash/ui/comments` instead. Barrel re-exports pull
+ * comment CSS into every page that imports `emdash/ui` (#2039). Will be removed in 1.0.
+ */
 export { default as CommentForm } from "./CommentForm.astro";
 
 // Widget components

packages/core/src/ui-comments.ts

@@ -0,0 +1,19 @@
+/**
+ * EmDash comment components
+ *
+ * Kept out of the main `emdash/ui` barrel so their styles are only loaded on
+ * pages that actually render comments. Importing from `emdash/ui` pulls the
+ * whole barrel into Astro's CSS module graph, which put comment CSS on every
+ * page that used e.g. `PortableText` (#2039).
+ *
+ * ```astro
+ * ---
+ * import { Comments, CommentForm } from "emdash/ui/comments";
+ * ---
+ * <Comments collection="posts" contentId={post.data.id} threaded />
+ * <CommentForm collection="posts" contentId={post.data.id} />
+ * ```
+ */
+
+export { default as Comments } from "./components/Comments.astro";
+export { default as CommentForm } from "./components/CommentForm.astro";

packages/core/src/ui.ts

@@ -52,9 +52,6 @@ export {
 	// Shares the name with the `type Block` re-export above; the
 	// type and the component live in different namespaces.
 	Block,
-	// Comment components
-	Comments,
-	CommentForm,
 	// Widget components
 	WidgetArea,
 	// Components object for manual use
@@ -78,3 +75,14 @@ export {
 	EmDashBodyStart,
 	EmDashBodyEnd,
 } from "./components/index.js";
+
+/**
+ * @deprecated Import from `emdash/ui/comments` instead. Barrel re-exports pull
+ * comment CSS into every page that imports `emdash/ui` (#2039). Will be removed in 1.0.
+ */
+export { Comments } from "./components/index.js";
+/**
+ * @deprecated Import from `emdash/ui/comments` instead. Barrel re-exports pull
+ * comment CSS into every page that imports `emdash/ui` (#2039). Will be removed in 1.0.
+ */
+export { CommentForm } from "./components/index.js";

packages/core/tests/integration/fixture/src/pages/posts/[slug].astro

@@ -1,6 +1,7 @@
 ---
 import { getEmDashEntry } from "emdash";
-import { PortableText, Comments, CommentForm } from "emdash/ui";
+import { PortableText } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 
 const { slug } = Astro.params;
 if (!slug) return Astro.redirect("/404");

packages/core/tsconfig.json

@@ -17,6 +17,7 @@
 		"src/components/**",
 		"src/preview/**",
 		"src/ui.ts",
+		"src/ui-comments.ts",
 		"src/auth/providers/*-admin.tsx"
 	]
 }

scripts/typecheck-public-source.mjs

@@ -38,6 +38,7 @@ const pkgPath = resolve(repoRoot, "packages/core/package.json");
  */
 const RUNTIME_COUPLED = new Set([
 	"./ui", // src/ui.ts -- re-exports Astro <Image>/<PortableText> components
+	"./ui/comments", // src/ui-comments.ts -- re-exports Astro <Comments>/<CommentForm>
 	"./auth/providers/github-admin", // .tsx -- admin React + @cloudflare/kumo
 	"./auth/providers/google-admin", // .tsx -- admin React + @cloudflare/kumo
 ]);

skills/building-emdash-site/SKILL.md

@@ -102,13 +102,12 @@ import { getByline, getBylineBySlug } from "emdash";
 import {
 	PortableText,
 	Image,
-	Comments,
-	CommentForm,
 	WidgetArea,
 	EmDashHead,
 	EmDashBodyStart,
 	EmDashBodyEnd,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import LiveSearch from "emdash/ui/search";
 
 // Page context (for plugin contributions)

skills/building-emdash-site/references/site-features.md

@@ -288,7 +288,7 @@ Built-in comments system:
 
 ```astro
 ---
-import { Comments, CommentForm } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 ---
 <Comments collection="posts" contentId={post.data.id} threaded />
 <CommentForm collection="posts" contentId={post.data.id} />

templates/blank/.agents/skills/building-emdash-site/SKILL.md

@@ -102,13 +102,12 @@ import { getByline, getBylineBySlug } from "emdash";
 import {
 	PortableText,
 	Image,
-	Comments,
-	CommentForm,
 	WidgetArea,
 	EmDashHead,
 	EmDashBodyStart,
 	EmDashBodyEnd,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import LiveSearch from "emdash/ui/search";
 
 // Page context (for plugin contributions)

templates/blank/.agents/skills/building-emdash-site/references/site-features.md

@@ -288,7 +288,7 @@ Built-in comments system:
 
 ```astro
 ---
-import { Comments, CommentForm } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 ---
 <Comments collection="posts" contentId={post.data.id} threaded />
 <CommentForm collection="posts" contentId={post.data.id} />

templates/blog-cloudflare/.agents/skills/building-emdash-site/SKILL.md

@@ -102,13 +102,12 @@ import { getByline, getBylineBySlug } from "emdash";
 import {
 	PortableText,
 	Image,
-	Comments,
-	CommentForm,
 	WidgetArea,
 	EmDashHead,
 	EmDashBodyStart,
 	EmDashBodyEnd,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import LiveSearch from "emdash/ui/search";
 
 // Page context (for plugin contributions)

templates/blog-cloudflare/.agents/skills/building-emdash-site/references/site-features.md

@@ -288,7 +288,7 @@ Built-in comments system:
 
 ```astro
 ---
-import { Comments, CommentForm } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 ---
 <Comments collection="posts" contentId={post.data.id} threaded />
 <CommentForm collection="posts" contentId={post.data.id} />

templates/blog-cloudflare/src/pages/posts/[slug].astro

@@ -10,10 +10,9 @@ import {
 import {
 	Image,
 	PortableText,
-	Comments,
-	CommentForm,
 	WidgetArea,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import Base from "../../layouts/Base.astro";
 import PostCard from "../../components/PostCard.astro";
 import { getReadingTime } from "../../utils/reading-time";

templates/blog/.agents/skills/building-emdash-site/SKILL.md

@@ -102,13 +102,12 @@ import { getByline, getBylineBySlug } from "emdash";
 import {
 	PortableText,
 	Image,
-	Comments,
-	CommentForm,
 	WidgetArea,
 	EmDashHead,
 	EmDashBodyStart,
 	EmDashBodyEnd,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import LiveSearch from "emdash/ui/search";
 
 // Page context (for plugin contributions)

templates/blog/.agents/skills/building-emdash-site/references/site-features.md

@@ -288,7 +288,7 @@ Built-in comments system:
 
 ```astro
 ---
-import { Comments, CommentForm } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 ---
 <Comments collection="posts" contentId={post.data.id} threaded />
 <CommentForm collection="posts" contentId={post.data.id} />

templates/blog/src/pages/posts/[slug].astro

@@ -10,10 +10,9 @@ import {
 import {
 	Image,
 	PortableText,
-	Comments,
-	CommentForm,
 	WidgetArea,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import Base from "../../layouts/Base.astro";
 import PostCard from "../../components/PostCard.astro";
 import { getReadingTime } from "../../utils/reading-time";

templates/marketing-cloudflare/.agents/skills/building-emdash-site/SKILL.md

@@ -102,13 +102,12 @@ import { getByline, getBylineBySlug } from "emdash";
 import {
 	PortableText,
 	Image,
-	Comments,
-	CommentForm,
 	WidgetArea,
 	EmDashHead,
 	EmDashBodyStart,
 	EmDashBodyEnd,
 } from "emdash/ui";
+import { Comments, CommentForm } from "emdash/ui/comments";
 import LiveSearch from "emdash/ui/search";
 
 // Page context (for plugin contributions)