docs: add future api

README.md

@@ -15,7 +15,7 @@
 
 ## Introduction
 
-> Karrotframe is rebranded with **"Stackflow"**. View full documentation and demo on [https://stackflow.so](https://stackflow.so/)
+> View full documentation and demo on [https://stackflow.so](https://stackflow.so/)
 
 **Stackflow** is a project that implements Stack Navigation UX, which is mainly used in mobile devices (iOS/Android, etc.) in a JavaScript environment. So, it can help to easily develop hybrid apps and webviews.
 

docs/components/Demo.tsx

@@ -26,17 +26,27 @@ const Demo: React.FC = () => {
           height: "640px",
           position: "relative",
           borderRadius: ".5rem",
-          overflow: "hidden",
-          transform: "translate3d(0, 0, 0)",
-          maskImage: "-webkit-radial-gradient(white, black)",
           boxShadow: "0 .25rem 1rem 0 rgba(0, 0, 0, .1)",
         }}
       >
-        <Stack
-          initialContext={{
-            theme: "cupertino",
+        <div
+          style={{
+            width: "100%",
+            maxWidth: "360px",
+            height: "640px",
+            position: "relative",
+            borderRadius: ".5rem",
+            overflow: "hidden",
+            transform: "translate3d(0, 0, 0)",
+            maskImage: "-webkit-radial-gradient(white, black)",
           }}
-        />
+        >
+          <Stack
+            initialContext={{
+              theme: "cupertino",
+            }}
+          />
+        </div>
       </div>
     </div>
   );

docs/pages/_meta.json

@@ -2,7 +2,6 @@
   "index": "Stackflow 시작하기",
   "guided-tour": "가이드",
   "advanced": "활용하기",
-  "architectures": "설계와 원칙",
-  "help": "도움 구하기",
+  "future-api": "Future API",
   "plugins": "플러그인"
 }

docs/pages/advanced/_meta.json

@@ -1,6 +1,5 @@
 {
   "history-sync": "히스토리와 동기화하기",
   "fix-use-flow": "useFlow 순환참조 해결하기",
-  "preloading": "미리 API 호출하기",
-  "migrate-from-karrotframe": "Karrotframe에서 이사가기"
+  "preloading": "미리 API 호출하기"
 }

docs/pages/advanced/fix-use-flow.mdx

@@ -2,6 +2,10 @@ import { Callout } from "nextra-theme-docs";
 
 # useFlow 순환참조 해결하기
 
+<Callout type="info" emoji="💡">
+  [Future API](/future-api/introduction)를 사용하면 `useFlow()` 순환참조 문제를 쉽게 해결할 수 있어요. [Future API](/future-api/introduction) 사용을 권장해요. 
+</Callout>
+
 `stackflow()` 함수가 반환하는 `useFlow()` 함수는 선언된 액티비티 타입을 활용해요. 따라서 `useFlow()`와 액티비티 컴포넌트는 서로 맞물리면서 순환 참조(Circular Dependency)를 일으켜요.
 `useActions()` 훅을 사용하고 타입을 따로 `import` 받으면 이러한 순환 참조를 제거할 수 있어요.
 

docs/pages/advanced/preloading.mdx

@@ -2,6 +2,10 @@ import { Callout } from "nextra-theme-docs";
 
 # 미리 API 호출하기
 
+<Callout type="info" emoji="💡">
+  [Future API](/future-api/introduction)를 사용하면 빌트인 Loader API를 활용해 프리로딩을 더 깔끔하게 구현할 수 있어요. [Future API](/future-api/introduction) 사용을 권장해요.
+</Callout>
+
 ## Preload 플러그인
 
 Preload 플러그인을 통해 미리 액티비티에 필요한 데이터를 가져올 수 있어요.

docs/pages/future-api/_meta.json

@@ -0,0 +1,7 @@
+{
+  "introduction": "시작하기",
+  "config": "@stackflow/config",
+  "changes": "API 변경사항",
+  "loader-api": "Loader API",
+  "api-pipelining": "API 파이프라이닝"
+}

docs/pages/future-api/api-pipelining.mdx

@@ -0,0 +1,60 @@
+# API 파이프라이닝
+
+![](./api-pipelining-diagram-1.png)
+
+아래와 같이 엔트리 파일에서 리액트 앱 초기화와 API 요청을 동시에 수행해 초기 렌더링까지 걸리는 시간을 단축할 수 있습니다. Stackflow Future API를 활용하면 API 파이프라이닝을 깔끔한 방법으로 구현할 수 있습니다.
+
+```typescript
+/**
+ * entry.ts
+ */
+import { makeTemplate } from "@stackflow/plugin-history-sync";
+import { config } from "./stackflow/stackflow.config";
+
+async function main() {
+  let initialLoaderData: any | null = null;
+
+  for (const activity of config.activities) {
+    const t = makeTemplate({ path: activity.path });
+    const match = t.parse(location.pathname + location.search);
+
+    if (!match) {
+      continue;
+    }
+
+    // 1. API 데이터를 요청합니다 (await하지 않습니다)
+    initialLoaderData = activity.loader({ params: match as any });
+    break;
+  }
+
+  // 2. 동시에 리액트 앱을 다운로드 받습니다.
+  const { renderApp } = await import("./renderApp");
+
+  // 3. 둘을 결합합니다.
+  renderApp({ initialLoaderData });
+}
+
+main();
+```
+
+```typescript
+/**
+ * renderApp.tsx
+ */
+export function renderApp({ initialLoaderData }: { initialLoaderData: any }) {
+  const root = ReactDOM.createRoot(document.getElementById("root")!);
+
+  root.render(
+    // 에러와 로딩 처리는 React에서 가능합니다
+    <ErrorBoundary>
+      <Suspense>
+        {/**
+          * Stack에 initialLoaderData를 넘겨주면
+          * 첫번째 loader를 실행시키는 대신 받은 loaderData로 결과를 덮어씁니다
+          */}
+        <Stack initialLoaderData={initialLoaderData} />,
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+```