akanjs 3.1.0-rc.3 → 3.1.0-rc.4

package/client/rscNavigation.ts

@@ -3,10 +3,7 @@ declare global {
   var __AKAN_RSC_IS_FROM_CACHE__: (() => boolean) | undefined;
   var __AKAN_RSC_REFRESH__: ((options?: { buildId?: number }) => Promise<void>) | undefined;
   var __AKAN_RSC_NAVIGATE__:
-    | ((
-        href: string,
-        options?: { replace?: boolean; scrollToTop?: boolean; shallow?: boolean; pop?: boolean },
-      ) => Promise<void>)
+    | ((href: string, options?: { replace?: boolean; scrollToTop?: boolean; shallow?: boolean }) => Promise<void>)
     | undefined;
   var __AKAN_DEV_SYNC_NAVIGATION__: ((href: string, kind: "push" | "replace" | "back" | "pop") => void) | undefined;
   var __AKAN_DEV_SYNC_NAVIGATION_APPLYING__: boolean | undefined;

package/client/transitionTypes.ts

@@ -1,6 +1,2 @@
 export const transitionTypes = ["none", "fade", "bottomUp", "stack", "scaleOut"] as const;
 export type TransitionType = (typeof transitionTypes)[number];
-
-/** The class `ui/styles.css` animates a page by when a navigation plays `transition` forward (push) or back (pop). */
-export const viewTransitionClassOf = (transition: Exclude<TransitionType, "none">, direction: "push" | "pop") =>
-  `akan-${transition}-${direction}` as const;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "3.1.0-rc.3",
+  "version": "3.1.0-rc.4",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/server/routeState.ts

@@ -27,8 +27,6 @@ export interface AkanRouterStateV1 {
   href: string;
   routeId: string;
   segments: AkanRouteSegmentState[];
-  /** The route's `.config({ transition })`, which the browser plays as a view transition on the way in and out. */
-  transition?: string;
 }
 
 export type AkanHeadSnapshotTag = "title" | "meta" | "link";
@@ -134,7 +132,6 @@ export function isAkanRouterStateV1(value: unknown): value is AkanRouterStateV1
     (state.buildId === undefined || typeof state.buildId === "number") &&
     typeof state.href === "string" &&
     typeof state.routeId === "string" &&
-    (state.transition === undefined || typeof state.transition === "string") &&
     Array.isArray(state.segments) &&
     state.segments.every(isSegmentState)
   );
@@ -210,12 +207,10 @@ export function createAkanRouterState({
   pathRoute,
   href,
   buildId,
-  transition,
 }: {
   pathRoute: PathRoute;
   href: string;
   buildId?: number;
-  transition?: string;
 }): AkanRouterStateV1 {
   return {
     version: AKAN_RSC_STATE_VERSION,
@@ -223,7 +218,6 @@ export function createAkanRouterState({
     href,
     routeId: pathRoute.path,
     segments: createAkanRouteSegments(pathRoute),
-    ...(transition && transition !== "none" ? { transition } : {}),
   };
 }
 

package/server/rscClient.tsx

@@ -2,8 +2,6 @@ import { createElement, type ReactNode, startTransition, type Usable, use, useLa
 import { hydrateRoot } from "react-dom/client";
 import { createFromReadableStream } from "react-server-dom-webpack/client.browser";
 import type {} from "../client/rscNavigation";
-import { transitionTypes, viewTransitionClassOf } from "../client/transitionTypes";
-import { addTransitionType } from "../client/viewTransition";
 import {
   type AkanHeadSnapshotV1,
   type AkanRouterStateV1,
@@ -209,13 +207,6 @@ function commitHistory(target: string, replace: boolean | undefined) {
   renderedHref = target;
 }
 
-function viewTransitionTypeOf(transition: string | undefined, push: boolean): string | null {
-  const type = transitionTypes.find((candidate) => candidate === transition);
-  if (!type || type === "none") return null;
-  if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return null;
-  return viewTransitionClassOf(type, push ? "push" : "pop");
-}
-
 /** Writes the entry without asking the server for the page; only a change that keeps the rendered path qualifies. */
 function navigateShallow(target: string, replace: boolean | undefined): boolean {
   if (pathnameOf(target) !== pathnameOf(renderedHref)) return false;
@@ -516,11 +507,6 @@ function Root(): ReactNode {
       });
       
       await nextNode.thenable;
-      
-      const viewTransitionType = viewTransitionTypeOf(
-        options.pop ? currentRouterState?.transition : nextNode.routerState?.transition,
-        !options.pop,
-      );
       const committed = commitLatestRscNavigation({
         cache: rscCache,
         href: target,
@@ -528,10 +514,6 @@ function Root(): ReactNode {
         maxEntries: MAX_RSC_CACHE_ENTRIES,
         startTransition,
         commitThenable: (node) => {
-          if (viewTransitionType && addTransitionType) {
-            addTransitionType("akan-nav");
-            addTransitionType(viewTransitionType);
-          }
           currentCommitFromCache = servedFromCache;
           resetAkanSegmentOutletPatches();
           setThenable(node.thenable);
@@ -564,7 +546,7 @@ window.addEventListener("popstate", (event) => {
   
   if (!keepsPage)
     void globalThis
-      .__AKAN_RSC_NAVIGATE__?.(window.location.href, { replace: true, scrollToTop: false, pop: true })
+      .__AKAN_RSC_NAVIGATE__?.(window.location.href, { replace: true, scrollToTop: false })
       ?.catch((error: unknown) => hardNavigateAfterRscFailure(window.location.href, true, error));
   window.setTimeout(() => {
     if (globalThis.__AKAN_DEV_SYNC_NAVIGATION_APPLYING__) return;

package/server/rscWorker.tsx

@@ -491,18 +491,11 @@ export class RscRenderer {
         const beforeLoadedKeys = RouteTreeBuilder.getCacheStats().loadedModuleKeys;
         const cacheDecision = match ? this.#getResultCacheEntry(request, urlObj) : { entry: null };
         const cacheEntry = cacheDecision.entry;
-        const targetFrame = match
-          ? await RouteElementComposer.resolveSsrFramePathRoute({
-              pathRoute: match.pathRoute,
-              basePath: this.#getBasePath(urlObj),
-            })
-          : null;
         const targetRouterState = match
           ? createAkanRouterState({
               pathRoute: match.pathRoute,
               href: urlObj.href,
               buildId: this.#pagesBundleBuildId,
-              transition: targetFrame?.pageState.transition,
             })
           : null;
         const searchParams = parseSearchParams(urlObj.search);

package/types/client/rscNavigation.d.ts

@@ -8,7 +8,6 @@ declare global {
         replace?: boolean;
         scrollToTop?: boolean;
         shallow?: boolean;
-        pop?: boolean;
     }) => Promise<void>) | undefined;
     var __AKAN_DEV_SYNC_NAVIGATION__: ((href: string, kind: "push" | "replace" | "back" | "pop") => void) | undefined;
     var __AKAN_DEV_SYNC_NAVIGATION_APPLYING__: boolean | undefined;

package/types/client/transitionTypes.d.ts

@@ -1,4 +1,2 @@
 export declare const transitionTypes: readonly ["none", "fade", "bottomUp", "stack", "scaleOut"];
 export type TransitionType = (typeof transitionTypes)[number];
-/** The class `ui/styles.css` animates a page by when a navigation plays `transition` forward (push) or back (pop). */
-export declare const viewTransitionClassOf: (transition: Exclude<TransitionType, "none">, direction: "push" | "pop") => "akan-stack-pop" | "akan-stack-push" | "akan-fade-pop" | "akan-fade-push" | "akan-bottomUp-pop" | "akan-bottomUp-push" | "akan-scaleOut-pop" | "akan-scaleOut-push";

package/types/server/routeState.d.ts

@@ -23,8 +23,6 @@ export interface AkanRouterStateV1 {
     href: string;
     routeId: string;
     segments: AkanRouteSegmentState[];
-    /** The route's `.config({ transition })`, which the browser plays as a view transition on the way in and out. */
-    transition?: string;
 }
 export type AkanHeadSnapshotTag = "title" | "meta" | "link";
 export interface AkanHeadSnapshotNode {
@@ -70,11 +68,10 @@ export declare function readAkanRouterStateResponseHeader(headers: Headers): Aka
 export declare function encodeAkanRscPatchSegmentPath(segmentPath: string[]): string;
 export declare function decodeAkanRscPatchSegmentPath(value: string | null | undefined): string[] | null;
 export declare function readAkanRscPatchMetadataResponseHeaders(headers: Headers): AkanRscPatchMetadata | null;
-export declare function createAkanRouterState({ pathRoute, href, buildId, transition, }: {
+export declare function createAkanRouterState({ pathRoute, href, buildId, }: {
     pathRoute: PathRoute;
     href: string;
     buildId?: number;
-    transition?: string;
 }): AkanRouterStateV1;
 export declare function createAkanRouteSegments(pathRoute: PathRoute): AkanRouteSegmentState[];
 export declare function createAkanSegmentOutletKey(segmentPath: string[], segmentIndex: number): string | null;

package/ui/System/SSR.tsx

@@ -7,20 +7,10 @@ import {
   type ReactFont,
   router,
   Translator,
-  transitionTypes,
   usePage,
-  viewTransitionClassOf,
 } from "akanjs/client";
 import { getRequestFrameState, setRequestTheme } from "akanjs/fetch";
-import {
-  Children,
-  type CSSProperties,
-  Fragment,
-  type ReactNode,
-  Suspense,
-  type ViewTransitionClassPerType,
-} from "react";
-import { ViewTransition } from "../../client/viewTransition";
+import { Children, type CSSProperties, Fragment, type ReactNode, Suspense } from "react";
 import { FontCss } from "../fontCss";
 import { frameSlotContainerClassNames, frameSlotContentClassNames, frameSlotStyles } from "../Layout/frameSlot";
 import { Load } from "../Load";
@@ -124,18 +114,6 @@ const ServerFontFace = ({ fonts }: { fonts: ReactFont[] }) => {
   );
 };
 
-const pageViewTransition: ViewTransitionClassPerType = Object.fromEntries([
-  ["default", "none"],
-  ...transitionTypes.flatMap((transition) =>
-    transition === "none"
-      ? []
-      : (["push", "pop"] as const).map((direction) => {
-          const type = viewTransitionClassOf(transition, direction);
-          return [type, type];
-        }),
-  ),
-]);
-
 interface SSRWrapperProps {
   className?: string;
   appName: string;
@@ -220,18 +198,7 @@ const SSRWrapper = ({
                   layoutStyle === "mobile" && "left-1/2 h-screen w-full max-w-[600px] -translate-x-1/2",
                 )}
               >
-                {ViewTransition ? (
-                  <ViewTransition
-                    default="none"
-                    enter={pageViewTransition}
-                    exit={pageViewTransition}
-                    update={pageViewTransition}
-                  >
-                    {Children.toArray(children)}
-                  </ViewTransition>
-                ) : (
-                  Children.toArray(children)
-                )}
+                {Children.toArray(children)}
               </div>
             </div>
           </div>

package/ui/styles.css

@@ -323,109 +323,6 @@ body.akan-mobile-document {
   }
 }
 
-/* Route transitions on the web: an RSC navigation tags itself `akan-<transition>-<push|pop>` from the route's
-   `.config({ transition })`, and the page content's ViewTransition takes that class. The rest of the page holds. */
-:root:active-view-transition-type(akan-nav)::view-transition-old(root),
-:root:active-view-transition-type(akan-nav)::view-transition-new(root) {
-  animation: none;
-}
-::view-transition-old(.akan-stack-push) {
-  animation: 260ms cubic-bezier(0.32, 0.72, 0, 1) both akan-vt-out-left;
-}
-::view-transition-new(.akan-stack-push) {
-  animation: 260ms cubic-bezier(0.32, 0.72, 0, 1) both akan-vt-in-right;
-}
-::view-transition-old(.akan-stack-pop) {
-  animation: 260ms cubic-bezier(0.32, 0.72, 0, 1) both akan-vt-out-right;
-}
-::view-transition-new(.akan-stack-pop) {
-  animation: 260ms cubic-bezier(0.32, 0.72, 0, 1) both akan-vt-in-left;
-}
-::view-transition-old(.akan-bottomUp-push),
-::view-transition-new(.akan-bottomUp-pop) {
-  animation: none;
-}
-::view-transition-new(.akan-bottomUp-push) {
-  animation: 280ms cubic-bezier(0.32, 0.72, 0, 1) both akan-vt-in-up;
-}
-::view-transition-old(.akan-bottomUp-pop) {
-  animation: 240ms ease-in both akan-vt-out-down;
-}
-::view-transition-old(.akan-fade-push),
-::view-transition-old(.akan-fade-pop) {
-  animation: 180ms ease-in both akan-vt-fade-out;
-}
-::view-transition-new(.akan-fade-push),
-::view-transition-new(.akan-fade-pop) {
-  animation: 180ms ease-out both akan-vt-fade-in;
-}
-::view-transition-old(.akan-scaleOut-push) {
-  animation: 220ms ease-in both akan-vt-shrink-out;
-}
-::view-transition-new(.akan-scaleOut-push) {
-  animation: 220ms ease-out both akan-vt-fade-in;
-}
-::view-transition-old(.akan-scaleOut-pop) {
-  animation: 200ms ease-in both akan-vt-fade-out;
-}
-::view-transition-new(.akan-scaleOut-pop) {
-  animation: 220ms ease-out both akan-vt-grow-in;
-}
-@keyframes akan-vt-in-right {
-  from {
-    transform: translateX(100%);
-  }
-}
-@keyframes akan-vt-out-left {
-  to {
-    transform: translateX(-30%);
-    opacity: 0.6;
-  }
-}
-@keyframes akan-vt-in-left {
-  from {
-    transform: translateX(-30%);
-    opacity: 0.6;
-  }
-}
-@keyframes akan-vt-out-right {
-  to {
-    transform: translateX(100%);
-  }
-}
-@keyframes akan-vt-in-up {
-  from {
-    transform: translateY(100%);
-  }
-}
-@keyframes akan-vt-out-down {
-  to {
-    transform: translateY(100%);
-  }
-}
-@keyframes akan-vt-fade-in {
-  from {
-    opacity: 0;
-  }
-}
-@keyframes akan-vt-fade-out {
-  to {
-    opacity: 0;
-  }
-}
-@keyframes akan-vt-shrink-out {
-  to {
-    transform: scale(0.94);
-    opacity: 0;
-  }
-}
-@keyframes akan-vt-grow-in {
-  from {
-    transform: scale(0.94);
-    opacity: 0;
-  }
-}
-
 /* Always-included keyframes (non-theme animations) */
 @keyframes smaller {
   0% {

package/client/viewTransition.ts

@@ -1,10 +0,0 @@
-import type { ComponentType, ViewTransitionProps } from "react";
-import * as React from "react";
-
-const react = React as {
-  ViewTransition?: ComponentType<ViewTransitionProps>;
-  addTransitionType?: (type: string) => void;
-};
-
-export const ViewTransition = react.ViewTransition;
-export const addTransitionType = react.addTransitionType;

package/types/client/viewTransition.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentType, ViewTransitionProps } from "react";
-export declare const ViewTransition: ComponentType<ViewTransitionProps> | undefined;
-export declare const addTransitionType: ((type: string) => void) | undefined;