Use JSDoc @import.

jaydenseric · jaydenseric · commit 134a45ffdd08 · 2025-01-28T13:58:40.000+11:00
diff --git a/public/components/App.mjs b/public/components/App.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 
+/** @import { AppComponent } from "ruck/serve.mjs" */
+
 import { createElement as h, Fragment, useMemo } from "react";
 import useCss from "ruck/useCss.mjs";
 import useHead from "ruck/useHead.mjs";
@@ -12,7 +14,7 @@ const css = new Set([
 
 /**
  * React component for the Ruck app.
- * @type {import("ruck/serve.mjs").AppComponent}
+ * @type {AppComponent}
  */
 export default function App() {
   const route = useRoute();
diff --git a/public/components/Country.mjs b/public/components/Country.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 
+/** @import { FetchGraphQLResult } from "graphql-react/fetchGraphQL.mjs" */
+
 import Loading, { css as cssLoading } from "device-agnostic-ui/Loading.mjs";
 import Table, { css as cssTable } from "device-agnostic-ui/Table.mjs";
 import useAutoLoad from "graphql-react/useAutoLoad.mjs";
@@ -47,10 +49,7 @@ const query = /* GraphQL */ `
 export default function Country({ countryCode }) {
   const cacheKey = `Country-${countryCode}`;
   const cacheValue =
-    /**
-     * @type {import("graphql-react/fetchGraphQL.mjs").FetchGraphQLResult
-     *   & { data?: QueryData } | undefined}
-     */
+    /** @type {FetchGraphQLResult & { data?: QueryData } | undefined} */
     (useCacheEntry(cacheKey));
 
   const loadingCacheValues = useLoadingEntry(cacheKey);
diff --git a/public/components/ErrorMessage.mjs b/public/components/ErrorMessage.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 
+/** @import { ReactNode } from "react" */
+
 import Heading, { css as cssHeading } from "device-agnostic-ui/Heading.mjs";
 import { createElement as h } from "react";
 
@@ -12,7 +14,7 @@ export const css = new Set([
  * React component for an error message.
  * @param {object} props Props.
  * @param {string} props.heading Heading.
- * @param {import("react").ReactNode} [props.children] Children.
+ * @param {ReactNode} [props.children] Children.
  */
 export default function ErrorMessage({ heading, children }) {
   return h(
diff --git a/public/components/ExampleGraphQLError.mjs b/public/components/ExampleGraphQLError.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 
+/** @import { FetchGraphQLResult } from "graphql-react/fetchGraphQL.mjs" */
+
 import Loading, { css as cssLoading } from "device-agnostic-ui/Loading.mjs";
 import useAutoLoad from "graphql-react/useAutoLoad.mjs";
 import useCacheEntry from "graphql-react/useCacheEntry.mjs";
@@ -30,10 +32,7 @@ const query = /* GraphQL */ `
 /** React component for example GraphQL errors. */
 export default function ExampleGraphQLError() {
   const cacheValue =
-    /**
-     * @type {import("graphql-react/fetchGraphQL.mjs").FetchGraphQLResult
-     *   & { data?: QueryData } | undefined}
-     */
+    /** @type {FetchGraphQLResult & { data?: QueryData } | undefined} */
     (useCacheEntry(cacheKey));
   const loadingCacheValues = useLoadingEntry(cacheKey);
   const loadCountriesApi = useLoadCountriesApi();
diff --git a/public/components/GithubRepo.mjs b/public/components/GithubRepo.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 
+/** @import { FetchGraphQLResult } from "graphql-react/fetchGraphQL.mjs" */
+
 import ButtonSubmit, {
   css as cssButtonSubmit,
 } from "device-agnostic-ui/ButtonSubmit.mjs";
@@ -62,10 +64,7 @@ const query = /* GraphQL */ `
 export default function GithubRepo({ repoId }) {
   const cacheKey = `GithubRepo-${repoId}`;
   const cacheValue =
-    /**
-     * @type {import("graphql-react/fetchGraphQL.mjs").FetchGraphQLResult
-     *   & { data?: QueryData } | undefined}
-     */
+    /** @type {FetchGraphQLResult & { data?: QueryData } | undefined} */
     (useCacheEntry(cacheKey));
 
   const loadingCacheValues = useLoadingEntry(cacheKey);
diff --git a/public/components/GraphQLErrors.mjs b/public/components/GraphQLErrors.mjs
@@ -1,5 +1,14 @@
 // @ts-check
 
+/**
+ * @import {
+ *   FetchGraphQLResult,
+ *   FetchGraphQLResultErrorLoading
+ * } from "graphql-react/fetchGraphQL.mjs"
+ * @import { GraphQLResultError } from "graphql-react/types.mjs"
+ * @import { ReactNode } from "react"
+ */
+
 import ListUnordered, {
   css as cssListUnordered,
 } from "device-agnostic-ui/ListUnordered.mjs";
@@ -15,8 +24,8 @@ export const css = new Set([
 ]);
 
 /**
- * @param {import("graphql-react/types.mjs").GraphQLResultError} error
- * @returns {error is import("graphql-react/fetchGraphQL.mjs").FetchGraphQLResultErrorLoading}
+ * @param {GraphQLResultError} error
+ * @returns {error is FetchGraphQLResultErrorLoading}
  */
 function isFetchGraphQLResultErrorLoading(error) {
   return typeof error.extensions?.code === "string" && [
@@ -30,9 +39,8 @@ function isFetchGraphQLResultErrorLoading(error) {
 /**
  * React component for displaying GraphQL errors.
  * @param {object} props Props.
- * @param {NonNullable<
- *   import("graphql-react/fetchGraphQL.mjs").FetchGraphQLResult["errors"]
- * >} props.errors GraphQL errors.
+ * @param {NonNullable<FetchGraphQLResult["errors"]>} props.errors GraphQL
+ *   errors.
  */
 export default function GraphQLErrors({ errors }) {
   return h(
@@ -42,7 +50,7 @@ export default function GraphQLErrors({ errors }) {
       /** @type {string} */
       let heading;
 
-      /** @type {import("react").ReactNode} */
+      /** @type {ReactNode} */
       let children;
 
       if (isFetchGraphQLResultErrorLoading(error)) {
diff --git a/public/components/Header.mjs b/public/components/Header.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 
+/** @import { ReactNode } from "react" */
+
 import { createElement as h } from "react";
 
 export const css = new Set([
@@ -9,7 +11,7 @@ export const css = new Set([
 /**
  * React component for a header.
  * @param {object} props Props.
- * @param {import("react").ReactNode} props.children Children.
+ * @param {ReactNode} props.children Children.
  */
 export default function Header({ children }) {
   return h("header", { className: "Header__header" }, children);
diff --git a/public/components/PageError.mjs b/public/components/PageError.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 
+/** @import { ReactNode } from "react" */
+
 import Heading, { css as cssHeading } from "device-agnostic-ui/Heading.mjs";
 import Para, { css as cssPara } from "device-agnostic-ui/Para.mjs";
 import { createElement as h } from "react";
@@ -16,7 +18,7 @@ export const css = new Set([
  * React component for a page error.
  * @param {object} props Props.
  * @param {string} props.title Title.
- * @param {import("react").ReactNode} props.description Description.
+ * @param {ReactNode} props.description Description.
  */
 export default function PageError({ title, description }) {
   return h(
diff --git a/public/components/SearchGithubRepos.mjs b/public/components/SearchGithubRepos.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 
+/** @import { ComponentPropsWithoutRef } from "react" */
+
 import Fieldset, { css as cssFieldset } from "device-agnostic-ui/Fieldset.mjs";
 import Textbox, { css as cssTextbox } from "device-agnostic-ui/Textbox.mjs";
 import { createElement as h, useCallback, useState } from "react";
@@ -17,7 +19,7 @@ export default function SearchGithubRepos() {
 
   /**
    * @satisfies {NonNullable<
-   *   import("react").ComponentPropsWithoutRef<typeof Textbox>["onChange"]
+   *   ComponentPropsWithoutRef<typeof Textbox>["onChange"]
    * >}
    */
   const onSearchChange = useCallback(({ target: { value } }) => {
diff --git a/public/components/SearchGithubReposResult.mjs b/public/components/SearchGithubReposResult.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 
+/** @import { FetchGraphQLResult } from "graphql-react/fetchGraphQL.mjs" */
+
 import LinkText, { css as cssLinkText } from "device-agnostic-ui/LinkText.mjs";
 import ListUnordered, {
   css as cssListUnordered,
@@ -57,10 +59,7 @@ const query = /* GraphQL */ `
 export default function SearchGithubReposResult({ searchQuery }) {
   const cacheKey = `SearchGithubReposResult-${searchQuery}`;
   const cacheValue =
-    /**
-     * @type {import("graphql-react/fetchGraphQL.mjs").FetchGraphQLResult
-     *   & { data?: QueryData } | undefined}
-     */
+    /** @type {FetchGraphQLResult & { data?: QueryData } | undefined} */
     (useCacheEntry(cacheKey));
 
   const loadingCacheValues = useLoadingEntry(cacheKey);
diff --git a/public/components/Section.mjs b/public/components/Section.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 
+/** @import { ReactNode } from "react" */
+
 import { createElement as h } from "react";
 
 export const css = new Set([
@@ -9,7 +11,7 @@ export const css = new Set([
 /**
  * React component for a section.
  * @param {object} props Props.
- * @param {import("react").ReactNode} props.children Children.
+ * @param {ReactNode} props.children Children.
  */
 export default function Section({ children }) {
   return h("section", { className: "Section__section" }, children);
diff --git a/public/hooks/useLoadCountriesApi.mjs b/public/hooks/useLoadCountriesApi.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 
+/** @import { GraphQLOperation } from "graphql-react/types.mjs" */
+
 import useLoadGraphQL from "graphql-react/useLoadGraphQL.mjs";
 import { useCallback } from "react";
 
@@ -11,9 +13,7 @@ export default function useLoadCountriesApi() {
     /**
      * Loads a Countries GraphQL API query.
      * @param {string} cacheKey Cache key.
-     * @param {import(
-     *   "graphql-react/types.mjs"
-     * ).GraphQLOperation} graphqlOperation GraphQL operation.
+     * @param {GraphQLOperation} graphqlOperation GraphQL operation.
      */
     (cacheKey, graphqlOperation) =>
       loadGraphQL(cacheKey, "https://countries.trevorblades.com", {
diff --git a/public/hooks/useLoadGithubApi.mjs b/public/hooks/useLoadGithubApi.mjs
@@ -1,5 +1,7 @@
 // @ts-check
 
+/** @import { GraphQLOperation } from "graphql-react/types.mjs" */
+
 import ACCESS_TOKEN_GITHUB from "env/ACCESS_TOKEN_GITHUB.mjs";
 import useLoadGraphQL from "graphql-react/useLoadGraphQL.mjs";
 import { useCallback } from "react";
@@ -12,9 +14,7 @@ export default function useLoadGithubApi() {
     /**
      * Loads a GitHub GraphQL API query.
      * @param {string} cacheKey Cache key.
-     * @param {import(
-     *   "graphql-react/types.mjs"
-     * ).GraphQLOperation} graphqlOperation GraphQL operation.
+     * @param {GraphQLOperation} graphqlOperation GraphQL operation.
      */
     (cacheKey, graphqlOperation) =>
       loadGraphQL(cacheKey, "https://api.github.com/graphql", {
diff --git a/public/router.mjs b/public/router.mjs
@@ -1,5 +1,10 @@
 // @ts-check
 
+/**
+ * @import { RouteContentWithCss } from "ruck/routePlanForContentWithCss.mjs"
+ * @import { Router } from "ruck/serve.mjs"
+ */
+
 import { createElement as h } from "react";
 import routePlanForContentWithCss from "ruck/routePlanForContentWithCss.mjs";
 
@@ -9,7 +14,7 @@ import PageErrorLoading, {
 
 /**
  * Gets the Ruck app route plan for a URL.
- * @type {import("ruck/serve.mjs").Router}
+ * @type {Router}
  */
 export default function router(url, headManager, isInitialRoute) {
   if (url.pathname === "/") {
@@ -42,7 +47,7 @@ export default function router(url, headManager, isInitialRoute) {
 /**
  * Catches a dynamic import error for route content with CSS.
  * @param {Error} cause Import error.
- * @returns {import("ruck/routePlanForContentWithCss.mjs").RouteContentWithCss}
+ * @returns {RouteContentWithCss}
  */
 function catchImportContentWithCss(cause) {
   console.error(new Error("Import rejection for route with CSS.", { cause }));
