zudoku 0.26.1 → 0.28.0

package/lib/zudoku.plugin-api-catalog.js

@@ -1,10 +1,10 @@
 import { j as e } from "./jsx-runtime-Bdg6XQ1m.js";
-import { s as j } from "./index-LNp6rxyU.js";
-import { u as b } from "./ZudokuContext-DeQZEp-x.js";
-import { b as y } from "./chunk-SYFQ2XB5-BF5IDYrB.js";
+import { s as j } from "./index-CjJS0l4l.js";
+import { u as b } from "./ZudokuContext-BTUJPpQl.js";
+import { b as y } from "./chunk-SYFQ2XB5-BPvC-soB.js";
 import { Head as v, Link as N } from "./zudoku.components.js";
 import { u as w } from "./state-mM7uaXTW.js";
-import { M as C } from "./Markdown-DFN6p0J-.js";
+import { M as C } from "./Markdown-Cyrx_JrO.js";
 import { c as h } from "./cn-qaFjX9_3.js";
 const f = (r, n) => j(`${r}-${n}`), k = ({
   items: r,

package/lib/zudoku.plugin-api-keys.js

@@ -1,14 +1,14 @@
 import { j as e } from "./jsx-runtime-Bdg6XQ1m.js";
 import { RotateCwIcon as g, TrashIcon as f, EyeOffIcon as j, EyeIcon as v, CheckIcon as w, CopyIcon as b, FileKey2Icon as K } from "lucide-react";
-import { D as k, S as m, R as N } from "./SlotletProvider-_3zzX_g_.js";
+import { D as k, S as m, R as N } from "./SlotletProvider-mQiPDQIH.js";
 import { i as c } from "./invariant-Caa8-XvF.js";
-import { u as d, S as I, a as S, b as A, c as C, d as E, e as x } from "./Select-D3O7wISy.js";
+import { u as d, S as I, a as S, b as A, c as C, d as E, e as x } from "./Select-CnCZ4WhS.js";
 import { a as P } from "./index.esm-CrSoEshU.js";
-import { a as D, L as u, O as R } from "./chunk-SYFQ2XB5-BF5IDYrB.js";
-import { a as y, e as q, u as O } from "./ZudokuContext-DeQZEp-x.js";
+import { a as D, L as u, O as R } from "./chunk-SYFQ2XB5-BPvC-soB.js";
+import { a as y, e as q, u as O } from "./ZudokuContext-BTUJPpQl.js";
 import { Button as l } from "./ui/Button.js";
 import { Input as z } from "./ui/Input.js";
-import { u as F } from "./hook-BRQEDRbn.js";
+import { u as F } from "./hook-FT3SJLe_.js";
 import { useState as p } from "react";
 import { c as T } from "./cn-qaFjX9_3.js";
 const L = ({ service: t }) => {

package/lib/zudoku.plugin-custom-pages.js

@@ -1,8 +1,8 @@
 import { j as o } from "./jsx-runtime-Bdg6XQ1m.js";
 import a from "react";
-import { P as n } from "./Markdown-DFN6p0J-.js";
+import { P as n } from "./Markdown-Cyrx_JrO.js";
 import { c } from "./cn-qaFjX9_3.js";
-import { u as p } from "./useExposedProps-CetwhZpP.js";
+import { u as p } from "./useExposedProps-BLKFBylA.js";
 const u = ({
   element: t,
   render: s,

package/lib/zudoku.plugin-markdown.js

@@ -74,7 +74,7 @@ const C = (n) => ({
         const h = {
           path: r,
           lazy: async () => {
-            const { MdxPage: l } = await import("./MdxPage-D9c4z09Q.js"), { default: p, ...g } = await a();
+            const { MdxPage: l } = await import("./MdxPage-DewragjB.js"), { default: p, ...g } = await a();
             return {
               element: /* @__PURE__ */ P.jsx(
                 l,

package/lib/zudoku.plugin-openapi.js

@@ -1,11 +1,12 @@
 import "./jsx-runtime-Bdg6XQ1m.js";
-import "./chunk-SYFQ2XB5-BF5IDYrB.js";
-import { o as a } from "./index-CXRrqOIl.js";
-import "./ZudokuContext-DeQZEp-x.js";
+import "./index-CjJS0l4l.js";
 import "lucide-react";
-import "./hook-BRQEDRbn.js";
+import "./chunk-SYFQ2XB5-BPvC-soB.js";
+import "./hook-FT3SJLe_.js";
 import "./ui/Button.js";
+import "./joinUrl-nLx9pD-Z.js";
+import { o as f } from "./index-DGugJOLc.js";
 export {
-  a as openApiPlugin
+  f as openApiPlugin
 };
 //# sourceMappingURL=zudoku.plugin-openapi.js.map

package/lib/zudoku.plugin-openapi.js.map

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugin-openapi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"zudoku.plugin-openapi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/lib/zudoku.plugin-redirect.js

@@ -1,4 +1,4 @@
-import { r as o } from "./chunk-SYFQ2XB5-BF5IDYrB.js";
+import { r as o } from "./chunk-SYFQ2XB5-BPvC-soB.js";
 const a = (r) => ({
   getRoutes: () => r.redirects.map(({ from: e, to: t }) => ({
     path: e,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.26.1",
+  "version": "0.28.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -131,7 +131,7 @@
     "@radix-ui/react-progress": "1.1.1",
     "@radix-ui/react-radio-group": "1.2.2",
     "@radix-ui/react-scroll-area": "1.2.2",
-    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-select": "2.1.5",
     "@radix-ui/react-slider": "1.2.2",
     "@radix-ui/react-slot": "1.1.1",
     "@radix-ui/react-switch": "1.1.2",

package/src/app/main.tsx

@@ -13,8 +13,10 @@ import { configuredSidebar } from "virtual:zudoku-sidebar";
 import "virtual:zudoku-theme.css";
 import { Layout, RouterError, Zudoku } from "zudoku/components";
 import type { ZudokuConfig } from "../config/config.js";
+import { StatusPage } from "../lib/components/StatusPage.js";
 import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { isNavigationPlugin } from "../lib/core/plugins.js";
+import { RouteGuard } from "../lib/core/RouteGuard.js";
 
 export const convertZudokuConfigToOptions = (
   config: ZudokuConfig,
@@ -32,6 +34,7 @@ export const convertZudokuConfigToOptions = (
     !config.page?.logo?.src?.dark;
 
   return {
+    protectedRoutes: config.protectedRoutes,
     page: {
       ...config.page,
       logo: {
@@ -69,7 +72,10 @@ export const convertZudokuConfigToOptions = (
   };
 };
 
-export const getRoutesByOptions = (options: ZudokuContextOptions) => {
+export const getRoutesByOptions = (
+  options: ZudokuContextOptions,
+  enableStatusPages = false,
+) => {
   const allPlugins = [
     ...(options.plugins ? options.plugins : []),
     ...(options.authentication?.getAuthenticationPlugin
@@ -79,19 +85,31 @@ export const getRoutesByOptions = (options: ZudokuContextOptions) => {
 
   const routes = allPlugins
     .flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []))
-    .concat({
-      path: "*",
-      loader: () => {
-        throw new Response("Not Found", { status: 404 });
+    .concat(
+      enableStatusPages
+        ? [400, 403, 404, 405, 414, 416, 500, 501, 502, 503, 504].map(
+            (statusCode) => ({
+              path: `/.static/${statusCode}`,
+              element: <StatusPage statusCode={statusCode} />,
+            }),
+          )
+        : [],
+    )
+    .concat([
+      {
+        path: "*",
+        loader: () => {
+          throw new Response("Not Found", { status: 404 });
+        },
       },
-    });
+    ]);
 
   return routes;
 };
 
 export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
   const options = convertZudokuConfigToOptions(config);
-  const routes = getRoutesByOptions(options);
+  const routes = getRoutesByOptions(options, config.enableStatusPages);
 
   return [
     {
@@ -102,6 +120,7 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
       ),
       children: [
         {
+          element: <RouteGuard />,
           errorElement: <RouterError />,
           children: routes,
         },

package/src/lib/components/AnchorLink.tsx

@@ -1,19 +1,22 @@
 import React from "react";
 import { Link, type LinkProps, useLocation } from "react-router";
+import { useScrollToHash } from "../util/useScrollToAnchor.js";
 
 /**
  * Link that scrolls to anchor even if the hash is already set in the URL.
  */
 export const AnchorLink = (props: LinkProps) => {
   const location = useLocation();
+  const scrollToHash = useScrollToHash();
   const hash = typeof props.to === "string" ? props.to : props.to.hash;
 
   const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    props.onClick?.(event);
     if (!hash?.startsWith("#") || hash !== location.hash) return;
 
     event.preventDefault();
-    document.getElementById(hash.slice(1))?.scrollIntoView();
+    scrollToHash(hash);
   };
 
-  return <Link onClick={handleClick} {...props} />;
+  return <Link {...props} onClick={handleClick} />;
 };

package/src/lib/components/Header.tsx

@@ -171,8 +171,8 @@ export const Header = memo(function HeaderInner() {
                   )}
                 </ClientOnly>
               )}
-              <ThemeSwitch />
               <Slotlet name="head-navigation-end" />
+              <ThemeSwitch />
             </div>
           </div>
         </div>

package/src/lib/components/Markdown.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { visit } from "unist-util-visit";
@@ -20,19 +21,17 @@ const rehypePlugins = [rehypeCodeBlockPlugin, rehypeRaw];
 // other styles are defined in main.css .prose
 export const ProseClasses = "prose dark:prose-invert prose-neutral";
 
-export const Markdown = ({
-  content,
-  className,
-}: {
-  content: string;
-  className?: string;
-}) => (
-  <ReactMarkdown
-    remarkPlugins={remarkPlugins}
-    rehypePlugins={rehypePlugins}
-    components={MdxComponents}
-    className={className}
-  >
-    {content}
-  </ReactMarkdown>
+export const Markdown = memo(
+  ({ content, className }: { content: string; className?: string }) => (
+    <ReactMarkdown
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
+      components={MdxComponents}
+      className={className}
+    >
+      {content}
+    </ReactMarkdown>
+  ),
 );
+
+Markdown.displayName = "Markdown";

package/src/lib/components/StatusPage.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+import { ErrorPage } from "./ErrorPage.js";
+
+type StatusPageProps = {
+  statusCode: number;
+  message?: ReactNode;
+};
+
+const getDefaultContent = (
+  statusCode: number,
+): { title: string; message: string } => {
+  switch (statusCode) {
+    case 400:
+      return {
+        title: "Bad Request",
+        message:
+          "The request could not be understood by the server due to malformed syntax.",
+      };
+    case 403:
+      return {
+        title: "Forbidden",
+        message: "You don't have permission to access this resource.",
+      };
+    case 404:
+      return {
+        title: "Not Found",
+        message: "The requested resource could not be found.",
+      };
+    case 405:
+      return {
+        title: "Method Not Allowed",
+        message:
+          "The request method is not supported for the requested resource.",
+      };
+    case 414:
+      return {
+        title: "Request URI Too Large",
+        message: "The request URI is too large.",
+      };
+    case 416:
+      return {
+        title: "Range Not Satisfiable",
+        message: "The server cannot satisfy the request range.",
+      };
+    case 500:
+      return {
+        title: "Internal Server Error",
+        message: "An unexpected error occurred while processing your request.",
+      };
+    case 501:
+      return {
+        title: "Not Implemented",
+        message:
+          "The server does not support the functionality required to fulfill the request.",
+      };
+    case 502:
+      return {
+        title: "Bad Gateway",
+        message:
+          "The server received an invalid response from the upstream server.",
+      };
+    case 503:
+      return {
+        title: "Service Unavailable",
+        message: "The server is temporarily unable to handle the request.",
+      };
+    case 504:
+      return {
+        title: "Gateway Timeout",
+        message:
+          "The server did not receive a timely response from the upstream server.",
+      };
+    default:
+      return {
+        title: "An error occurred",
+        message: "Something went wrong while processing your request.",
+      };
+  }
+};
+
+export const StatusPage = ({ statusCode, message }: StatusPageProps) => {
+  const defaultContent = getDefaultContent(statusCode);
+
+  return (
+    <ErrorPage
+      title={defaultContent.title}
+      message={message ?? defaultContent.message}
+      category={statusCode}
+    />
+  );
+};

package/src/lib/components/SyntaxHighlight.tsx

@@ -41,6 +41,7 @@ type SyntaxHighlightProps = {
   copyable?: boolean;
   showLanguageIndicator?: boolean;
   language?: string;
+  title?: string;
 } & Omit<HighlightProps, "children" | "language">;
 
 const remapLang = {
@@ -50,6 +51,7 @@ const remapLang = {
 export const SyntaxHighlight = ({
   copyable = true,
   language = "plain",
+  title,
   ...props
 }: SyntaxHighlightProps) => {
   const { resolvedTheme } = useTheme();
@@ -70,12 +72,18 @@ export const SyntaxHighlight = ({
     <ClientOnly
       fallback={
         <div className="relative group">
+          {title && (
+            <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
+              {title}
+            </div>
+          )}
           <pre
             className={cn(
               "relative scrollbar overflow-x-auto",
               props.className,
               props.noBackground ? "!bg-transparent" : themeColorClasses,
               props.wrapLines && "whitespace-pre-wrap break-words",
+              title && "pt-10",
             )}
           >
             {props.code}
@@ -95,6 +103,11 @@ export const SyntaxHighlight = ({
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <div className="relative group">
+            {title && (
+              <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
+                {title}
+              </div>
+            )}
             <pre
               className={cn(
                 "relative scrollbar overflow-x-auto",
@@ -102,6 +115,7 @@ export const SyntaxHighlight = ({
                 props.className,
                 props.noBackground && "!bg-transparent",
                 props.wrapLines && "whitespace-pre-wrap break-words",
+                title && "pt-10",
               )}
               style={style}
             >

package/src/lib/components/ThemeSwitch.tsx

@@ -1,26 +1,25 @@
 import { MoonStarIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Button } from "zudoku/ui/Button.js";
-import { ClientOnly } from "./ClientOnly.js";
+import { cn } from "../util/cn.js";
 
 export const ThemeSwitch = () => {
   const { resolvedTheme, setTheme } = useTheme();
   const ThemeIcon = resolvedTheme === "dark" ? MoonStarIcon : SunIcon;
 
   return (
-    <ClientOnly>
-      <Button
-        variant="ghost"
-        aria-label={
-          resolvedTheme === "dark"
-            ? "Switch to light mode"
-            : "Switch to dark mode"
-        }
-        className="p-2.5 -m-2.5 rounded-full"
-        onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
-      >
-        <ThemeIcon size={18} />
-      </Button>
-    </ClientOnly>
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label={
+        resolvedTheme === "dark"
+          ? "Switch to light mode"
+          : "Switch to dark mode"
+      }
+      className={cn(resolvedTheme ? "opacity-100" : "opacity-0")}
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+    >
+      <ThemeIcon size={18} />
+    </Button>
   );
 };

package/src/lib/components/cache.ts

@@ -0,0 +1,15 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+export const CACHE_KEYS = Object.freeze({
+  API_IDENTITIES: ["api-identities"],
+});
+
+export const useCache = () => {
+  const queryClient = useQueryClient();
+
+  return {
+    invalidateCache: async (key: keyof typeof CACHE_KEYS) => {
+      await queryClient.invalidateQueries({ queryKey: CACHE_KEYS[key] });
+    },
+  };
+};

package/src/lib/components/context/ViewportAnchorContext.tsx

@@ -63,6 +63,7 @@ export const ViewportAnchorProvider = ({
   const [activeAnchor, setActiveAnchor] = useState("");
   const observerRef = useRef<IntersectionObserver | null>(null);
   const registeredElements = useRef(new Set<HTMLElement>());
+  const pendingElements = useRef(new Set<HTMLElement>());
 
   useEffect(() => {
     observerRef.current = new IntersectionObserver(
@@ -81,6 +82,13 @@ export const ViewportAnchorProvider = ({
       },
     );
 
+    // Process any elements that tried to register before observer was ready
+    pendingElements.current.forEach((element) => {
+      registeredElements.current.add(element);
+      observerRef.current?.observe(element);
+    });
+    pendingElements.current.clear();
+
     return () => observerRef.current?.disconnect();
   }, []);
 
@@ -114,14 +122,22 @@ export const ViewportAnchorProvider = ({
   const observeFns = useMemo(() => {
     return {
       observe: (element: HTMLElement | null) => {
-        if (!element || !observerRef.current) return;
+        if (!element) return;
+
+        if (!observerRef.current) {
+          pendingElements.current.add(element);
+          return;
+        }
+
         registeredElements.current.add(element);
         observerRef.current.observe(element);
       },
       unobserve: (element: HTMLElement | null) => {
-        if (!element || !observerRef.current) return;
+        if (!element) return;
+
+        pendingElements.current.delete(element);
         registeredElements.current.delete(element);
-        observerRef.current.unobserve(element);
+        observerRef.current?.unobserve(element);
       },
     };
   }, []);
@@ -132,8 +148,6 @@ export const ViewportAnchorProvider = ({
   );
 
   return (
-    <ViewportAnchorContext.Provider value={value}>
-      {children}
-    </ViewportAnchorContext.Provider>
+    <ViewportAnchorContext value={value}>{children}</ViewportAnchorContext>
   );
 };

package/src/lib/components/context/ZudokuContext.ts

@@ -3,6 +3,7 @@ import { createContext, useContext } from "react";
 import { matchPath, useLocation } from "react-router";
 import { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinPath } from "../../util/joinPath.js";
+import { CACHE_KEYS } from "../cache.js";
 import { traverseSidebar } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
@@ -21,9 +22,10 @@ export const useZudoku = () => {
 
 export const useApiIdentities = () => {
   const { getApiIdentities } = useZudoku();
+
   return useQuery({
     queryFn: getApiIdentities,
-    queryKey: ["api-identities"],
+    queryKey: [CACHE_KEYS.API_IDENTITIES],
   });
 };
 

package/src/lib/components/index.ts

@@ -15,7 +15,12 @@ import { Layout as LayoutImport } from "./Layout.js";
 import { Markdown as MarkdownImport } from "./Markdown.js";
 import { Spinner as SpinnerImport } from "./Spinner.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
+import {
+  CACHE_KEYS as CACHE_KEYS_IMPORT,
+  useCache as useCacheImport,
+} from "./cache.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
+
 export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
 export const Layout = /*@__PURE__*/ LayoutImport;
 export const RouterError = /*@__PURE__*/ RouterErrorImport;
@@ -27,6 +32,8 @@ export const Head = /*@__PURE__*/ Helmet;
 
 export const useZudoku = /*@__PURE__*/ useZudokuImport;
 export const useAuth = /*@__PURE__*/ useAuthImport;
+export const useCache = /*@__PURE__*/ useCacheImport;
+export const CACHE_KEYS = /*@__PURE__*/ CACHE_KEYS_IMPORT;
 export const Zudoku = /*@__PURE__*/ ZudokuImport;
 
 export const Callout = /*@__PURE__*/ CalloutImport;

package/src/lib/components/navigation/SidebarCategory.tsx

@@ -67,7 +67,7 @@ export const SidebarCategory = ({
             isActive: false,
             className: [
               "text-start font-medium",
-              isCollapsible
+              isCollapsible || typeof category.link !== "undefined"
                 ? "cursor-pointer"
                 : "cursor-default hover:bg-transparent",
             ],
@@ -82,7 +82,7 @@ export const SidebarCategory = ({
           {category.link?.type === "doc" ? (
             <NavLink
               to={joinPath(category.link.id)}
-              className="flex-1"
+              className="flex-1 truncate"
               onClick={() => {
                 // if it is the current path and closed then open it because there's no path change to trigger the open
                 if (isActive && !open) {
@@ -112,6 +112,7 @@ export const SidebarCategory = ({
         className={cn(
           // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
           hasInteracted && "CollapsibleContent",
+          category.items.length === 0 && "hidden",
           "ms-6 my-1",
         )}
       >

package/src/lib/core/RouteGuard.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+import { matchPath, Outlet, useLocation } from "react-router";
+import { useAuth } from "../authentication/hook.js";
+import { useZudoku } from "../components/context/ZudokuContext.js";
+import { ZudokuError } from "../util/invariant.js";
+
+export const RouteGuard = () => {
+  const auth = useAuth();
+  const zudoku = useZudoku();
+  const location = useLocation();
+
+  const isProtected = zudoku.options.protectedRoutes?.some((path) =>
+    matchPath({ path, end: true }, location.pathname),
+  );
+
+  useEffect(() => {
+    if (isProtected && !auth.isAuthenticated) {
+      void zudoku.authentication?.signIn();
+    }
+  }, [isProtected, auth.isAuthenticated, zudoku.authentication]);
+
+  if (isProtected && !auth.isAuthenticated) {
+    return null;
+  }
+
+  if (isProtected && !auth.isAuthEnabled) {
+    throw new ZudokuError("Authentication is not enabled", {
+      title: "Authentication is not enabled",
+      developerHint:
+        "To use protectedRoutes you need authentication to be enabled",
+    });
+  }
+
+  return <Outlet />;
+};

package/src/lib/core/ZudokuContext.ts

@@ -65,6 +65,7 @@ export type ZudokuContextOptions = {
     components?: MdxComponentsType;
   };
   overrides?: ComponentsContextType;
+  protectedRoutes?: string[];
 };
 
 export class ZudokuContext {
@@ -74,16 +75,16 @@ export class ZudokuContext {
   public meta: ZudokuContextOptions["metadata"];
   public page: ZudokuContextOptions["page"];
   public authentication?: ZudokuContextOptions["authentication"];
-  private navigationPlugins: NavigationPlugin[];
+  private readonly navigationPlugins: NavigationPlugin[];
 
-  constructor(config: ZudokuContextOptions) {
-    this.plugins = config.plugins ?? [];
-    this.topNavigation = config.topNavigation ?? [];
-    this.sidebars = config.sidebars ?? {};
+  constructor(public readonly options: ZudokuContextOptions) {
+    this.plugins = options.plugins ?? [];
+    this.topNavigation = options.topNavigation ?? [];
+    this.sidebars = options.sidebars ?? {};
     this.navigationPlugins = this.plugins.filter(isNavigationPlugin);
-    this.authentication = config.authentication;
-    this.meta = config.metadata;
-    this.page = config.page;
+    this.authentication = options.authentication;
+    this.meta = options.metadata;
+    this.page = options.page;
   }
 
   initialize = async (): Promise<void> => {