akanjs 2.0.0-beta.8 → 2.0.0-beta.9

package/server/hmr/clientScript.ts

@@ -45,11 +45,11 @@ export const HMR_CLIENT_SCRIPT = `(function(){
         return;
       }
       if (msg.type === "rsc-refresh") {
-        refreshRsc(msg);
+        reloadForHmr(msg);
         return;
       }
       if (msg.type === "client-refresh") {
-        refreshClient(msg);
+        reloadForHmr(msg);
         return;
       }
       if (msg.type === "css-update") {
@@ -73,6 +73,12 @@ export const HMR_CLIENT_SCRIPT = `(function(){
     setTimeout(connect, delay);
   }
 
+  function reloadForHmr(msg){
+    try { self.__AKAN_RSC_CLEAR_CACHE__ && self.__AKAN_RSC_CLEAR_CACHE__(); } catch(e){}
+    if (msg && msg.buildId != null) lastBuildId = msg.buildId;
+    location.reload();
+  }
+
   function ensureOverlay(){
     if (overlayEl && overlayLabelEl) return overlayEl;
     if (!overlayStyleEl) {
@@ -303,8 +309,5 @@ export const HMR_CLIENT_SCRIPT = `(function(){
     return cssAssets[""] && cssAssets[""].cssUrl ? cssAssets[""].cssUrl : null;
   }
 
-  ensureRefreshRuntime().catch(function(err){
-    console.warn("[akan-hmr] React Refresh runtime preload failed", err);
-  });
   connect();
 })();`;

package/ui/Portal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { createPortal } from "react-dom";
 
 interface PortalProps {

package/ui/System/CSR.tsx

@@ -15,7 +15,7 @@ import {
 import { st } from "akanjs/store";
 import { animated } from "akanjs/ui";
 import { useFetch, usePushNoti } from "akanjs/webkit";
-import { memo, type ReactNode, useEffect, useRef } from "react";
+import { createElement, memo, type ReactNode, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 
 import { FontFace } from "../FontFace";
@@ -305,9 +305,7 @@ const CSRPageContainer = ({ pathRoute, prefix, layoutStyle }: CSRPageContainerPr
         <animated.div
           id={`pageContainer-${pathRoute.path}`}
           style={{ ...(page?.containerStyle ?? {}), zIndex }}
-          className={clsx("absolute top-0 left-0 isolate", {
-            "w-full": layoutStyle === "web",
-            "w-screen": layoutStyle === "mobile",
+          className={clsx("absolute top-0 left-0 isolate w-screen", {
             absolute: pageType !== "current",
             hidden: pageType === "cached",
             "pointer-events-none": pageType === "prev",
@@ -398,11 +396,14 @@ const RenderLayer = memo(({ renders, index, params, searchParams }: RenderLayerP
     <RenderLayer renders={renders} index={index + 1} params={params} searchParams={searchParams} />
   );
   const routeRender = renders[index];
+  const isAsyncRender = routeRender?.render.constructor.name === "AsyncFunction";
   const resultRef = useRef<ReactNode | Promise<ReactNode> | null>(null);
-  if (resultRef.current === null) {
+  if (isAsyncRender && resultRef.current === null) {
     resultRef.current = routeRender?.render({ children, params, searchParams } as never) ?? null;
   }
   const { fulfilled, value: Component } = useFetch(resultRef.current);
+  if (!routeRender) return null;
+  if (!isAsyncRender) return createElement(routeRender.render as never, { children, params, searchParams } as never);
   if (!fulfilled || !Component) return <>{composeLoadingFallback(renders.slice(index), params)}</>;
   return <>{Component}</>;
 });

package/ui/System/SSR.tsx

@@ -115,11 +115,11 @@ const SSRWrapper = ({
     <div key="frame-root" id="frameRoot" className={className}>
       <ClientPathWrapper layoutStyle={layoutStyle} prefix={prefix}>
         <div key="top-safe-area" id="topSafeArea" className={clsx("fixed inset-x-0 top-0 bg-base-100")} />
-        <div key="page-containers" id="pageContainers" className={clsx("isolate")}>
+        <div key="page-containers" id="pageContainers" className={clsx("isolate bg-red-500")}>
           <div id="pageContainer">
             <div
               id="pageContent"
-              className={clsx("relative isolate bg-base-100", {
+              className={clsx("relative isolate", {
                 "w-full": layoutStyle === "web",
                 "left-1/2 h-screen w-[600px] -translate-x-1/2": layoutStyle === "mobile",
               })}

package/webkit/bootCsr.tsx

@@ -23,7 +23,7 @@ import {
   parseRouteModuleKey,
   routeSegmentToTreePath,
 } from "akanjs/common";
-import { memo, type ReactNode, useRef } from "react"; 
+import { createElement, memo, type ReactNode, useRef } from "react"; 
 import * as ReactDOM from "react-dom/client";
 import { useCsrValues } from "./useCsrValues";
 import { useFetch } from "./useFetch";
@@ -48,11 +48,14 @@ const RootRenderLayer = memo(({ renders, index, params, searchParams }: RootRend
     <RootRenderLayer renders={renders} index={index + 1} params={params} searchParams={searchParams} />
   );
   const routeRender = renders[index];
+  const isAsyncRender = routeRender?.render.constructor.name === "AsyncFunction";
   const resultRef = useRef<ReactNode | Promise<ReactNode> | null>(null);
-  if (resultRef.current === null) {
+  if (isAsyncRender && resultRef.current === null) {
     resultRef.current = routeRender?.render({ children, params, searchParams } as never) ?? null;
   }
   const { fulfilled, value: Layout } = useFetch(resultRef.current);
+  if (!routeRender) return null;
+  if (!isAsyncRender) return createElement(routeRender.render as never, { children, params, searchParams } as never);
   if (!fulfilled || !Layout) return <>{composeLoadingFallback(renders.slice(index), params)}</>;
   return Layout;
 });
@@ -101,7 +104,7 @@ export const bootCsr = async (context: Record<string, () => Promise<RouteModule>
       if (pageContent.default) pages[key] = pageContent;
     }),
   );
-  const getPageState = (csrConfig?: PageConfig) => {
+  const getPageState = (PageConfig?: PageConfig) => {
     const {
       transition,
       safeArea,
@@ -111,7 +114,7 @@ export const bootCsr = async (context: Record<string, () => Promise<RouteModule>
       cache,
       topSafeAreaColor,
       bottomSafeAreaColor,
-    }: PageConfig = csrConfig ?? {};
+    }: PageConfig = PageConfig ?? {};
     const pageState: PageState = {
       transition: transition ?? "none",
       topSafeArea:
@@ -159,7 +162,7 @@ export const bootCsr = async (context: Record<string, () => Promise<RouteModule>
             pageIncludesOwnLayout: parsed.leaf === "_index",
             isSpecialRoute: parsed.isSpecialRoute,
             pageState: getPageState((page as RouteModuleWithConfig).pageConfig),
-            csrConfig: (page as RouteModuleWithConfig).pageConfig,
+            PageConfig: (page as RouteModuleWithConfig).pageConfig,
           }),
     } as Route);
   }

package/cli/templates/app/common/commonLogic.ts

@@ -1,12 +0,0 @@
-import type { AppInfo, LibInfo } from "akanjs/devkit";
-
-interface Dict {
-  appName: string;
-}
-export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict) {
-  return `
-
-export const someCommonLogic = () => {
-};
-  `;
-}

package/cli/templates/app/common/index.ts

@@ -1,10 +0,0 @@
-import type { AppInfo, LibInfo } from "akanjs/devkit";
-
-interface Dict {
-  [key: string]: string;
-}
-export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict = {}) {
-  return `
-export * from "./commonLogic";
-  `;
-}

package/cli/templates/app/srvkit/backendLogic.ts

@@ -1,12 +0,0 @@
-import type { AppInfo, LibInfo } from "akanjs/devkit";
-
-interface Dict {
-  appName: string;
-}
-export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict) {
-  return `
-
-export const someBackendLogic = () => {
-};
-  `;
-}

package/cli/templates/app/srvkit/index.ts

@@ -1,10 +0,0 @@
-import type { AppInfo, LibInfo } from "akanjs/devkit";
-
-interface Dict {
-  [key: string]: string;
-}
-export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict = {}) {
-  return `
-export * from "./backendLogic";
-  `;
-}

package/cli/templates/app/ui/UiComponent.ts

@@ -1,16 +0,0 @@
-import type { AppInfo, LibInfo } from "akanjs/devkit";
-
-interface Dict {
-  appName: string;
-}
-export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict) {
-  return {
-    filename: "UiComponent.tsx",
-    content: `
-
-export const UiComponent = () => {
-  return <div>UiComponent</div>;
-};
-  `,
-  };
-}

package/cli/templates/app/ui/index.ts

@@ -1,10 +0,0 @@
-import type { AppInfo, LibInfo } from "akanjs/devkit";
-
-interface Dict {
-  [key: string]: string;
-}
-export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict = {}) {
-  return `
-export { UiComponent } from "./UiComponent";
-`;
-}

package/cli/templates/app/webkit/frontendLogic.ts

@@ -1,12 +0,0 @@
-import type { AppInfo, LibInfo } from "akanjs/devkit";
-
-interface Dict {
-  appName: string;
-}
-export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict) {
-  return `
-
-export const someFrontendLogic = () => {
-};
-  `;
-}

package/cli/templates/app/webkit/index.ts

@@ -1,10 +0,0 @@
-import type { AppInfo, LibInfo } from "akanjs/devkit";
-
-interface Dict {
-  [key: string]: string;
-}
-export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict = {}) {
-  return `
-export * from "./frontendLogic";
-  `;
-}

package/cli/templates/module/index.tsx

@@ -1,44 +0,0 @@
-import type { AppInfo, LibInfo } from "akanjs/devkit";
-
-interface Dict {
-  Model: string;
-  model: string;
-  appName: string;
-}
-export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict) {
-  return {
-    filename: "index.tsx",
-    content: `
-import { Signal } from "akanjs/ui";
-import { AiOutlineDatabase } from "react-icons/ai";
-
-import * as Template from "./${dict.Model}.Template";
-import * as Unit from "./${dict.Model}.Unit";
-import * as Util from "./${dict.Model}.Util";
-import * as View from "./${dict.Model}.View";
-import * as Zone from "./${dict.Model}.Zone";
-
-export const ${dict.Model} = {
-  Menu: {
-    Admin: {
-      key: "${dict.model}",
-      label: "${dict.Model}",
-      icon: <AiOutlineDatabase />,
-      render: () => <Zone.Admin />,
-    },
-    Doc: {
-      key: "${dict.model}",
-      label: "${dict.Model}",
-      icon: <AiOutlineDatabase />,
-      render: () => <Signal.Doc.Zone refName="${dict.model}" />,
-    },
-  },
-  Template,
-  Unit,
-  Util,
-  View,
-  Zone,
-};
-`,
-  };
-}