@apimatic/cli 2.0.0-beta.3 → 2.0.0-beta.5

package/portal-template/src/routes/oauth.callback.tsx

@@ -0,0 +1,54 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
+import { useEffect, useState } from 'react';
+import { AuthorizationFailure } from '@/components/authorization-failure';
+import { baseOptions } from '@/lib/layout.shared';
+import { forgetStartingPage, oauthCallback, type OAuthCallback, type OAuthCallbackFailure } from '@/lib/oauth-callback';
+import { portal } from '@/lib/portal';
+
+// Published portals are static, so this page does in the browser what Fumadocs'
+// `createOAuthHandler()` route does on a server.
+export const Route = createFileRoute('/oauth/callback')({
+  head: () => ({ meta: [{ title: `Authorization | ${portal.name}` }, { name: 'robots', content: 'noindex' }] }),
+  component: OAuthCallbackPage
+});
+
+let completion: OAuthCallback | undefined;
+
+/**
+ * Reading the cookie and sending the browser on can each happen only once per page load, not
+ * once per mount: the StrictMode `portal serve` runs under mounts the page twice, and the second
+ * mount would find the cookie gone. The answer is kept, so a later mount in the same load, such
+ * as Back after leaving through the header, shows the same outcome. Every arrival from a provider
+ * is a new load.
+ */
+function completeAuthorization(): OAuthCallback {
+  if (completion === undefined) {
+    completion = oauthCallback(document.cookie, window.location);
+    forgetStartingPage();
+    if (completion.kind === 'return') window.location.replace(completion.url);
+  }
+  return completion;
+}
+
+function OAuthCallbackPage() {
+  // Null until the effect has read the cookie, which the prerendered page cannot.
+  const [failure, setFailure] = useState<OAuthCallbackFailure | null>(null);
+
+  useEffect(() => {
+    const callback = completeAuthorization();
+    if (callback.kind !== 'return') setFailure(callback);
+  }, []);
+
+  return (
+    <HomeLayout {...baseOptions()}>
+      <div className="flex flex-col px-8 justify-center flex-1 text-center items-center gap-4">
+        {failure === null ? (
+          <p className="text-fd-muted-foreground">Completing authorization…</p>
+        ) : (
+          <AuthorizationFailure failure={failure} />
+        )}
+      </div>
+    </HomeLayout>
+  );
+}

package/portal-template/static-functions-base.ts

@@ -0,0 +1,41 @@
+import type { Plugin } from 'vite';
+import { withBasePath } from './src/lib/base-path';
+
+/** The package whose browser half fetches a prerendered server function's result. */
+const PACKAGE = /[\\/]@tanstack[\\/]start-static-server-functions[\\/]/;
+
+/** Where it fetches that result from, opening backtick included so nothing else naming the folder matches. */
+export const CACHE_ADDRESS = '`/__tsr/staticServerFnCache/';
+
+/** Puts the browser's fetch of prerendered page data under the base, until TanStack/router#6152 does it itself. */
+export function staticFunctionsBase(): Plugin {
+  let base = '/';
+  let found = false;
+  return {
+    name: 'apimatic:static-functions-base',
+    apply: 'build',
+    enforce: 'pre',
+    // The server writes the files under the output directory, which the host already serves at the base.
+    applyToEnvironment: (environment) => environment.name === 'client',
+    configResolved(config) {
+      base = config.base;
+    },
+    transform: {
+      filter: { id: PACKAGE, code: CACHE_ADDRESS },
+      handler(code) {
+        // Found at the root too, where the replacement is the address itself.
+        found = true;
+        return code.replaceAll(CACHE_ADDRESS, '`' + withBasePath(CACHE_ADDRESS.slice(1), base));
+      }
+    },
+    // An upgrade that moves the address fails the build, rather than every link in the portal.
+    buildEnd(error) {
+      if (error === undefined && !found) {
+        this.error(
+          `No module of @tanstack/start-static-server-functions holds ${CACHE_ADDRESS}, so a portal ` +
+            'served under a path could not load the pages its links lead to. See portal-template/static-functions-base.ts.'
+        );
+      }
+    }
+  };
+}

package/portal-template/vite.config.ts

@@ -1,29 +1,40 @@
 import { fileURLToPath } from 'node:url';
 import react from '@vitejs/plugin-react';
 import { tanstackStart } from '@tanstack/react-start/plugin/vite';
-import { defineConfig } from 'vite';
+import { defineConfig, searchForWorkspaceRoot } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
 import { fumadocsMdx } from 'fumadocs-mdx/vite';
+import { dependencyDirectories } from './dependency-directories.ts';
 import { downloads } from './downloads.ts';
 import { generatedPagesReload } from './generated-pages-reload.ts';
 import { readBuildPaths, readPortalIdentity } from './portal-config.ts';
 import { prerenderPages } from './prerender-pages.ts';
 import { specReload } from './spec-reload.ts';
+import { remarkImageReferences } from './src/lib/remark-image-references.ts';
+import { staticFunctionsBase } from './static-functions-base.ts';
 
 export default defineConfig(async () => {
   const [paths, identity] = await Promise.all([readBuildPaths(), readPortalIdentity()]);
   const pages = await prerenderPages(paths, identity.siteUrl);
   const publicDir: string | false = paths.staticDir ?? false;
+  const portalProjectDirectory = fileURLToPath(new URL('.', import.meta.url));
 
   return {
+    // TanStack Start derives the router's basepath and every asset URL from it.
+    base: paths.base,
     publicDir,
     plugins: [
       generatedPagesReload(),
       downloads(paths.downloadsDir),
+      staticFunctionsBase(),
       // `/images/logo.png` is read from the static directory, and a remote image is never fetched for its size.
       fumadocsMdx({
         globalOptions: {
-          mdxOptions: { remarkImageOptions: { publicDir: publicDir || undefined, external: false } }
+          mdxOptions: {
+            remarkImageOptions: { publicDir: publicDir || undefined, external: false },
+            // A function, so it runs ahead of the preset's own plugins, `remarkImage` among them.
+            remarkPlugins: (plugins) => [remarkImageReferences, ...plugins]
+          }
         }
       }),
       specReload(paths.specs),
@@ -55,6 +66,15 @@ export default defineConfig(async () => {
     // listens on `::1` alone, a connect that stalls under load falls back to 127.0.0.1 and is
     // refused, failing the build; binding IPv4 leaves the fetch a single address to reach.
     preview: { host: '127.0.0.1' },
+    server: {
+      fs: {
+        allow: [
+          searchForWorkspaceRoot(portalProjectDirectory),
+          ...dependencyDirectories(portalProjectDirectory),
+          ...(paths.staticDir === null ? [] : [paths.staticDir])
+        ]
+      }
+    },
     resolve: {
       tsconfigPaths: true,
       alias: [