zudoku 0.0.0-f417aae → 0.0.0-f471fb8

package/src/lib/components/DevPortal.tsx

@@ -1,111 +0,0 @@
-import { MDXProvider } from "@mdx-js/react";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { Helmet } from "@zudoku/react-helmet-async";
-import {
-  Fragment,
-  memo,
-  type PropsWithChildren,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { Outlet, useNavigation } from "react-router-dom";
-import {
-  DevPortalContext,
-  queryClient,
-  ZudokuContextOptions,
-} from "../core/DevPortalContext.js";
-import { hasHead, isMdxProviderPlugin } from "../core/plugins.js";
-import { TopLevelError } from "../errors/TopLevelError.js";
-import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
-import { MdxComponents } from "../util/MdxComponents.js";
-import "../util/requestIdleCallbackPolyfill.js";
-import {
-  ComponentsProvider,
-  DEFAULT_COMPONENTS,
-} from "./context/ComponentsContext.js";
-import { ThemeProvider } from "./context/ThemeProvider.js";
-import { ViewportAnchorProvider } from "./context/ViewportAnchorContext.js";
-import { ZudokuProvider } from "./context/ZudokuProvider.js";
-import { SlotletProvider } from "./SlotletProvider.js";
-
-const DevPortalInner = ({
-  children,
-  ...props
-}: PropsWithChildren<ZudokuContextOptions>) => {
-  const components = useMemo(
-    () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
-    [props.overrides],
-  );
-
-  const mdxComponents = useMemo(() => {
-    const componentsFromPlugins = (props.plugins ?? [])
-      .filter(isMdxProviderPlugin)
-      .flatMap((plugin) =>
-        plugin.getMdxComponents ? [plugin.getMdxComponents()] : [],
-      );
-
-    return {
-      ...componentsFromPlugins.reduce((acc, curr) => ({ ...acc, ...curr }), {}),
-      ...MdxComponents,
-      ...props.mdx?.components,
-    };
-  }, [props.mdx?.components, props.plugins]);
-  const { stagger } = useContext(StaggeredRenderContext);
-  const [didNavigate, setDidNavigate] = useState(false);
-  const staggeredValue = useMemo(
-    () => (didNavigate ? { stagger: true } : { stagger }),
-    [stagger, didNavigate],
-  );
-  const navigation = useNavigation();
-
-  useEffect(() => {
-    if (didNavigate) {
-      return;
-    }
-    setDidNavigate(true);
-  }, [didNavigate, navigation.location]);
-
-  const [devPortalContext] = useState(() => new DevPortalContext(props));
-
-  const heads = props.plugins
-    ?.filter(hasHead)
-    // eslint-disable-next-line react/no-array-index-key
-    .map((plugin, i) => <Fragment key={i}>{plugin.getHead?.()}</Fragment>);
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Helmet>{heads}</Helmet>
-      <StaggeredRenderContext.Provider value={staggeredValue}>
-        <ZudokuProvider context={devPortalContext}>
-          <MDXProvider components={mdxComponents}>
-            <ThemeProvider>
-              <ComponentsProvider value={components}>
-                <SlotletProvider slotlets={props.slotlets}>
-                  <ViewportAnchorProvider>
-                    {children ?? <Outlet />}
-                  </ViewportAnchorProvider>
-                </SlotletProvider>
-              </ComponentsProvider>
-            </ThemeProvider>
-          </MDXProvider>
-        </ZudokuProvider>
-      </StaggeredRenderContext.Provider>
-    </QueryClientProvider>
-  );
-};
-
-const Inner = memo(DevPortalInner);
-
-const DevPortal = (props: ZudokuContextOptions) => {
-  return (
-    <ErrorBoundary FallbackComponent={TopLevelError}>
-      <Inner {...props} />
-    </ErrorBoundary>
-  );
-};
-DevPortal.displayName = "DevPortal";
-
-export { DevPortal };

package/src/lib/components/SyntaxHighlight.tsx

@@ -1,122 +0,0 @@
-import {
-  Highlight,
-  Prism,
-  themes,
-  type HighlightProps,
-} from "prism-react-renderer";
-
-import { CheckIcon, CopyIcon } from "lucide-react";
-
-globalThis.Prism = Prism;
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-bash.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-ruby.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-markup-templating.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-markup.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-php.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-json.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-java.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-csharp.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-objectivec.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-markdown.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-javascript.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-typescript.min.js");
-
-import { useState } from "react";
-import { cn } from "../util/cn.js";
-import { useTheme } from "./context/ThemeContext.js";
-
-type SyntaxHighlightProps = {
-  className?: string;
-  noBackground?: boolean;
-  wrapLines?: boolean;
-  copyable?: boolean;
-  showLanguageIndicator?: boolean;
-  language?: string;
-} & Omit<HighlightProps, "children" | "language">;
-
-export const SyntaxHighlight = ({
-  copyable = true,
-  language = "plain",
-  ...props
-}: SyntaxHighlightProps) => {
-  const [isDark] = useTheme();
-  const [isCopied, setIsCopied] = useState(false);
-
-  if (!props.code) {
-    return null;
-  }
-
-  return (
-    <Highlight
-      theme={isDark ? themes.vsDark : themes.github}
-      language={language}
-      {...props}
-    >
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <div className="relative group">
-          <pre
-            className={cn(
-              "relative scrollbar overflow-x-auto",
-              className,
-              props.className,
-              props.noBackground && "!bg-transparent",
-              props.wrapLines && "whitespace-pre-wrap break-words",
-            )}
-            style={style}
-          >
-            {tokens.map((line, i) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <div key={i} {...getLineProps({ line })}>
-                {line.map((token, key) => (
-                  // eslint-disable-next-line react/no-array-index-key
-                  <span key={key} {...getTokenProps({ token })} />
-                ))}
-              </div>
-            ))}
-          </pre>
-          {props.showLanguageIndicator && (
-            <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-              {language}
-            </span>
-          )}
-          {copyable && (
-            <button
-              type="button"
-              aria-label="Copy code"
-              title="Copy code"
-              className="absolute top-2 right-2 p-2 opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700 hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 transition"
-              disabled={isCopied}
-              onClick={() => {
-                setIsCopied(true);
-                void navigator.clipboard.writeText(
-                  tokens
-                    .map((line) => line.map(({ content }) => content).join(""))
-                    .join("\n"),
-                );
-                setTimeout(() => setIsCopied(false), 2000);
-              }}
-            >
-              {isCopied ? (
-                <CheckIcon className="text-emerald-600" size={16} />
-              ) : (
-                <CopyIcon size={16} />
-              )}
-            </button>
-          )}
-        </div>
-      )}
-    </Highlight>
-  );
-};

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

@@ -1,8 +0,0 @@
-import { createContext, useContext } from "react";
-
-export const ThemeContext = createContext<readonly [boolean, () => void]>([
-  false,
-  () => {},
-]);
-
-export const useTheme = () => useContext(ThemeContext);

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

@@ -1,27 +0,0 @@
-import { ReactNode, useCallback, useEffect, useState } from "react";
-import { ThemeContext } from "./ThemeContext.js";
-
-export const ThemeProvider = (props: { children: ReactNode }) => {
-  const [dark, setDark] = useState(false);
-
-  // On mount, read the preferred theme from the persistence
-  useEffect(() => {
-    const theme = localStorage.getItem("theme");
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-    const isDark = theme === "dark" || (!theme && prefersDark.matches);
-
-    setDark(isDark);
-  }, [dark]);
-
-  // To toggle between dark and light modes
-  const toggle = useCallback(() => {
-    const toggled = !dark;
-    document.documentElement.classList.toggle("dark", toggled);
-    localStorage.setItem("theme", toggled ? "dark" : "light");
-    setDark(toggled);
-  }, [dark]);
-
-  const value = [dark, toggle] as const;
-
-  return <ThemeContext.Provider value={value} {...props} />;
-};

package/src/lib/plugins/markdown/generateRoutes.tsx

@@ -1,38 +0,0 @@
-import { type RouteObject } from "react-router-dom";
-
-import {
-  MarkdownPluginDefaultOptions,
-  MarkdownPluginOptions,
-} from "./index.js";
-
-export const generateRoutes = (
-  markdownFiles: MarkdownPluginOptions["markdownFiles"],
-  filesPath: string,
-  defaultOptions?: MarkdownPluginDefaultOptions,
-): RouteObject[] =>
-  Object.entries(markdownFiles).flatMap(([file, importPromise]) => {
-    let rootDir = filesPath.split("**")[0];
-    rootDir = rootDir.replace("/**", "/");
-    const re = new RegExp(`^${rootDir}(.*).mdx?`);
-    const match = file.match(re);
-    const fsPath = match?.at(1);
-
-    if (!fsPath) return [];
-
-    return {
-      path: fsPath,
-      lazy: async () => {
-        const { MdxPage } = await import("./MdxPage.js");
-        const { default: Component, ...props } = await importPromise();
-        return {
-          element: (
-            <MdxPage
-              mdxComponent={Component}
-              {...props}
-              defaultOptions={defaultOptions}
-            />
-          ),
-        };
-      },
-    } satisfies RouteObject;
-  });

package/src/lib/plugins/openapi/Route.tsx

@@ -1,20 +0,0 @@
-import { Outlet } from "react-router-dom";
-import { Provider, Client as UrqlClient } from "urql";
-import { OasConfigProvider } from "./context.js";
-import { OasPluginConfig } from "./interfaces.js";
-
-export function OpenApiRoute({
-  config,
-  client,
-}: {
-  config: OasPluginConfig;
-  client: typeof UrqlClient;
-}) {
-  return (
-    <Provider value={client}>
-      <OasConfigProvider value={{ config }}>
-        <Outlet />
-      </OasConfigProvider>
-    </Provider>
-  );
-}

package/src/lib/plugins/openapi/client/createMemoryClient.ts

@@ -1,51 +0,0 @@
-/* eslint-disable no-console */
-import { cacheExchange, Client, fetchExchange, mapExchange } from "urql";
-import { createServer } from "./createServer.js";
-import { CreateClientFunction } from "./interfaces.js";
-
-export type WorkerGraphQLMessage = { id: string; body: string };
-
-const localServer = createServer();
-
-/**
- * Creates an in memory Client that does not use Workers. This allows
- * developers to run the simple standalone version of zudoku using the CDN
- * hosted scripts. Worker's cannot be loaded cross domain so in this case
- * we sacrifice performance for making it work cross domain.
- */
-export const createClient: CreateClientFunction = () => {
-  return new Client({
-    url: "/__z/graphql",
-    // Custom fetch to send the GraphQL request to the worker and convert the response back to a `Response` object
-    fetch: async (req, init) => {
-      if (!init?.body) throw new Error("No body");
-      const response = await localServer.fetch(
-        new Request("http://localhost/__z/graphql", {
-          method: "POST",
-          body: init.body,
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }),
-      );
-      return response;
-      // port.postMessage({
-      //   id: e.data.id,
-      //   body: await response.text(),
-      // } satisfies WorkerGraphQLMessage);
-    },
-    exchanges: [
-      cacheExchange,
-      mapExchange({
-        onError(error, operation) {
-          console.error(error);
-          console.groupCollapsed("Operation info");
-          console.log("body", operation.query.loc?.source.body.trim());
-          console.log("variables", operation.variables);
-          console.groupEnd();
-        },
-      }),
-      fetchExchange,
-    ],
-  });
-};

package/src/lib/plugins/openapi/client/createWorkerClient.ts

@@ -1,75 +0,0 @@
-/* eslint-disable no-console */
-import { monotonicFactory } from "ulidx";
-import { cacheExchange, Client, fetchExchange, mapExchange } from "urql";
-import { createWaitForNotify } from "../../../util/createWaitForNotify.js";
-import { createClient as createMemoryClient } from "./createMemoryClient.js";
-import { CreateClientFunction } from "./interfaces.js";
-
-export type WorkerGraphQLMessage = { id: string; body: string };
-const ulid = monotonicFactory();
-
-/**
- * This loads the client from a worker and uses mess port to send requests
- * and responses between the main thread and the worker.
- */
-export const createClient: CreateClientFunction = ({
-  useMemoryClient,
-}: {
-  useMemoryClient: boolean;
-}) => {
-  if (useMemoryClient || typeof SharedWorker === "undefined") {
-    return createMemoryClient({ useMemoryClient });
-  }
-  // NOTE: This URL needs to be inline with the SharedWorker otherwse
-  // vite build does not recognize the worker file as a module.
-  const worker = new SharedWorker(new URL("./worker.ts", import.meta.url), {
-    type: "module",
-  });
-
-  worker.onerror = (e) => {
-    console.error(e);
-  };
-
-  worker.port.start();
-
-  const [waitFor, notify] = createWaitForNotify<string>();
-
-  worker.port.onmessage = (e: MessageEvent<WorkerGraphQLMessage>) => {
-    notify(e.data.id, e.data.body);
-  };
-
-  return new Client({
-    url: "/__z/graphql",
-    // Custom fetch to send the GraphQL request to the worker and convert the response back to a `Response` object
-    fetch: async (_req, init) => {
-      if (!init?.body) throw new Error("No body");
-
-      const id = ulid();
-      worker.port.postMessage({
-        id,
-        body: init.body as string,
-      } satisfies WorkerGraphQLMessage);
-
-      const body = await waitFor(id);
-
-      return new Response(body, {
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-    },
-    exchanges: [
-      cacheExchange,
-      mapExchange({
-        onError(error, operation) {
-          console.error(error);
-          console.groupCollapsed("Operation info");
-          console.log("body", operation.query.loc?.source.body.trim());
-          console.log("variables", operation.variables);
-          console.groupEnd();
-        },
-      }),
-      fetchExchange,
-    ],
-  });
-};

package/src/lib/plugins/openapi/client/interfaces.ts

@@ -1,5 +0,0 @@
-import { Client } from "urql";
-
-export type CreateClientFunction = (config: {
-  useMemoryClient: boolean;
-}) => Client;

package/src/lib/plugins/openapi/client/worker.ts

@@ -1,30 +0,0 @@
-import { createServer } from "./createServer.js";
-import { type WorkerGraphQLMessage } from "./createWorkerClient.js";
-
-const localServer = createServer();
-
-const worker = self as unknown as SharedWorkerGlobalScope;
-
-worker.addEventListener(
-  "connect",
-  function (event: MessageEvent<{ id: string; body: string }>) {
-    const port = event.ports[0];
-
-    port.onmessage = async function (e) {
-      const response = await localServer.fetch(
-        new Request("/__z/graphql", {
-          method: "POST",
-          body: e.data.body,
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }),
-      );
-
-      port.postMessage({
-        id: e.data.id,
-        body: await response.text(),
-      } satisfies WorkerGraphQLMessage);
-    };
-  },
-);

package/src/lib/plugins/openapi/playground/ResponseTab.tsx

@@ -1,76 +0,0 @@
-import { useState } from "react";
-import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
-import { Card } from "../../../ui/Card.js";
-import { SimpleSelect } from "../SimpleSelect.js";
-
-const mimeTypeToLanguage = (mimeType: string) => {
-  const mimeTypeMapping = {
-    "application/json": "json",
-    "text/json": "json",
-    "text/html": "html",
-    "text/css": "css",
-    "text/javascript": "javascript",
-    "application/xml": "xml",
-    "application/xhtml+xml": "xhtml",
-  };
-
-  return Object.entries(mimeTypeMapping).find(([mime]) =>
-    mimeType.includes(mime),
-  )?.[1];
-};
-
-const detectLanguage = (headers: Headers) => {
-  const contentType = headers.get("Content-Type") || "";
-  return mimeTypeToLanguage(contentType);
-};
-
-const tryParseJson = (body: string) => {
-  try {
-    return JSON.stringify(JSON.parse(body), null, 2);
-  } catch {
-    return null;
-  }
-};
-
-export const ResponseTab = ({
-  body = "",
-  headers,
-}: {
-  body?: string;
-  headers: Headers;
-}) => {
-  const detectedLanguage = detectLanguage(headers);
-  const jsonContent = tryParseJson(body);
-  const beautifiedBody = jsonContent || body;
-  const [view, setView] = useState<"formatted" | "raw">(
-    jsonContent ? "formatted" : "raw",
-  );
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Card className="shadow-none">
-        <SyntaxHighlight
-          language={
-            view === "raw" ? (jsonContent ? "plain" : detectedLanguage) : "json"
-          }
-          noBackground
-          // playground dialog has h-5/6 ≈ 83.333vh
-          className="overflow-x-auto p-4 text-xs max-h-[calc(83.333vh-180px)]"
-          code={view === "raw" ? body : beautifiedBody}
-        />
-      </Card>
-      {jsonContent && (
-        <div className="flex justify-end">
-          <SimpleSelect
-            value={view}
-            onChange={(e) => setView(e.target.value as "formatted" | "raw")}
-            options={[
-              { value: "formatted", label: "Formatted" },
-              { value: "raw", label: "Raw" },
-            ]}
-          />
-        </div>
-      )}
-    </div>
-  );
-};

package/src/lib/plugins/openapi-worker.ts

@@ -1 +0,0 @@
-export { createClient } from "./openapi/client/createWorkerClient.js";

package/src/lib/plugins/search-inkeep/InkeepCustomTrigger.tsx

@@ -1,3 +0,0 @@
-import { InkeepCustomTrigger } from "@inkeep/widgets";
-
-export default InkeepCustomTrigger;

package/src/lib/themeToggle.ts

@@ -1,7 +0,0 @@
-export const themeToggle = () => {
-  const isDarkMode =
-    localStorage.getItem("theme") === "dark" ||
-    (!localStorage.getItem("theme") &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches);
-  document.documentElement.classList.toggle("dark", isDarkMode);
-};

package/src/lib/util/createWaitForNotify.ts

@@ -1,18 +0,0 @@
-export const createWaitForNotify = <T extends NonNullable<unknown>>() => {
-  const resolveMap = new Map<string, (value: T | PromiseLike<T>) => void>();
-
-  const waitFor = (id: string) =>
-    new Promise<T>((resolve) => {
-      resolveMap.set(id, resolve);
-    });
-
-  const notify = (id: string, data: T) => {
-    const resolveFn = resolveMap.get(id);
-    if (resolveFn) {
-      resolveFn(data);
-      resolveMap.delete(id);
-    }
-  };
-
-  return [waitFor, notify] as const;
-};