Merge branch 'main' into lazy-activity

Author: orionmiz

.changeset/rude-schools-brush.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-basic-ui": patch
+---
+
+Fix a bug that entrance transition is not applied.

.github/workflows/opencode.yml

@@ -19,6 +19,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Run opencode
         uses: sst/opencode/github@latest

docs/pages/docs/advanced/preloading.en.mdx

@@ -55,7 +55,7 @@ export type TypeActivities = typeof activities;
 Afterwards, within each activity, you can retrieve the `preloadRef` value using the `useActivityPreloadRef()` hook.
 
 ```tsx showLineNumbers filename="MyActivity.ts" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { useActivityPreloadRef } from "@stackflow/plugin-preload";
 
 const MyActivity: ActivityComponentType = () => {
@@ -82,7 +82,7 @@ export const { usePreloader } = createPreloader<TypeActivities>();
 ```
 
 ```tsx showLineNumbers filename="MyActivity.ts" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { usePreloader } from "./usePreloader";
 
 const MyActivity:  = () => {

docs/pages/docs/advanced/preloading.ko.mdx

@@ -55,7 +55,7 @@ export type TypeActivities = typeof activities;
 이후 각 액티비티 내에서 `useActivityPreloadRef()` 훅을 통해 해당 `preloadRef` 값을 가져올 수 있어요.
 
 ```tsx showLineNumbers filename="MyActivity.ts" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { useActivityPreloadRef } from "@stackflow/plugin-preload";
 
 const MyActivity: ActivityComponentType = () => {
@@ -82,7 +82,7 @@ export const { usePreloader } = createPreloader<TypeActivities>();
 ```
 
 ```tsx showLineNumbers filename="MyActivity.ts" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { usePreloader } from "./usePreloader";
 
 const MyActivity:  = () => {

docs/pages/docs/get-started/activity.en.mdx

@@ -21,7 +21,7 @@ import { APITable } from "../../../components/APITable";
 To actually use an activity, you need to register it with the `stackflow()` function before using it. An activity is a React component declared with the type `ActivityComponentType`.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 
 const MyActivity: ActivityComponentType = () => {
@@ -101,7 +101,7 @@ If you have successfully registered the initial activity, you can see the render
 Some activities require specific parameters when used. In such cases, declare the parameter as the activity's Props.
 
 ```tsx showLineNumbers filename="Article.tsx" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 
 type ArticleParams = {

docs/pages/docs/get-started/activity.ko.mdx

@@ -21,7 +21,7 @@ import { APITable } from "../../../components/APITable";
 액티비티를 실제로 사용하기 위해서는 사용하기 전 `stackflow()` 함수에 등록이 필요해요. 액티비티는 `ActivityComponentType`이라는 타입으로 선언되는 리액트 컴포넌트에요.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 
 const MyActivity: ActivityComponentType = () => {
@@ -105,7 +105,7 @@ export const { Stack, useFlow } = stackflow({
 해당 액티비티가 사용될 때, 특정 파라미터가 필요한 경우가 있어요. 이런 경우 다음과 같이 액티비티의 Props로 해당 파라미터를 선언해요.
 
 ```tsx showLineNumbers filename="Article.tsx" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 
 type ArticleParams = {

docs/pages/docs/get-started/getting-state.en.mdx

@@ -18,7 +18,7 @@ The activities accessible through the `activities` field contain information rel
 To access the stack state in a UI component, use the `useStack()` hook.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy
-import { ActivityComponentType, useStack } from "@stackflow/react";
+import { useStack, type ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -69,7 +69,7 @@ There are the following fields in the stack state.
 You can use the `useActivity()` hook to get information about the current activity.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy
-import { ActivityComponentType, useActivity } from "@stackflow/react";
+import { useActivity, type ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 

docs/pages/docs/get-started/getting-state.ko.mdx

@@ -18,7 +18,7 @@ import { APITable } from "../../../components/APITable";
 스택 상태를 UI 컴포넌트에서 가져오려면, `useStack()` 훅을 활용해요.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy
-import { ActivityComponentType, useStack } from "@stackflow/react";
+import { useStack, type ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -69,7 +69,7 @@ export default MyActivity;
 현재 액티비티의 정보를 가져오기 위해 `useActivity()` 훅을 사용할 수 있어요.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy
-import { ActivityComponentType, useActivity } from "@stackflow/react";
+import { useActivity, type ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 

docs/pages/docs/get-started/navigating-activities.en.mdx

@@ -14,7 +14,7 @@ If you have successfully registered an activity, it's time to navigate between a
 We use the `useFlow()` hook created in `stackflow.ts`. Through the `push()` function within this hook, we can stack a new activity as follows.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy /push/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -76,7 +76,7 @@ The third parameter of the `push()` function, additional options, includes the f
 Next, let's look at how to replace the current activity without adding a new activity to the stack. Using the `replace()` function from the `useFlow()` hook created in `stackflow.ts`, you can replace the current activity as follows.
 
 ```tsx showLineNumbers filename="MyActivity.tsx" copy /replace/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -134,7 +134,7 @@ The third parameter of the `replace()` function, additional options, includes th
 Finally, let's look at how to delete the current activity and return to the previous activity. Using the `pop()` function from the `useFlow()` hook created in `stackflow.ts`, you can delete the current activity as follows.
 
 ```tsx showLineNumbers filename="Article.tsx" copy /pop/
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -169,23 +169,23 @@ const Article: ActivityComponentType<ArticleParams> = ({ params }) => {
 export default Article;
 ```
 
-`pop()` takes optional parameters for the number of stacks to pop and additional options. These parameters can be omitted, and default values will be used.
+`pop()` takes optional parameters for the number of activities to pop and additional options. These parameters can be omitted, and default values will be used.
 
 ```ts
-pop(); // pop a single stack
+pop(); // pop a single activity
 
-pop(3); // pop multiple stacks
+pop(3); // pop multiple activities
 
 pop({
   /* additional option */
-}); // pop a single stack with additional options
+}); // pop a single activity with additional options
 
 pop(3, {
   /* additional option */
-}); // pop multiple stacks with additional options
+}); // pop multiple activities with additional options
 ```
 
-The first parameter of the pop() function can specify the number of stacks to pop or define additional options. If the first parameter is used for the number of stacks, the second parameter can then be used to provide additional options.
+The first parameter of the pop() function can specify the number of activities to pop or define additional options. If the first parameter is used for the number of activities, the second parameter can then be used to provide additional options.
 
 The additional options include the following values.
 

docs/pages/docs/get-started/navigating-activities.ko.mdx

@@ -14,7 +14,7 @@ import { APITable } from "../../../components/APITable";
 `stackflow.ts`에서 생성했던 `useFlow()` 훅을 사용해요. 해당 훅 내에 `push()` 함수를 통해 다음과 같이 새 액티비티를 쌓을 수 있어요.
 
 ```tsx filename="MyActivity.tsx" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -78,7 +78,7 @@ push(
 다음으로 스택에 새로운 액티비티를 추가하지 않고 현재 액티비티를 교체하는 방법에 대해서 살펴봐요. `stackflow.ts`에서 생성했던 `useFlow()` 훅의 `replace()` 함수를 통해 다음과 같이 현재 액티비티를 교체할 수 있어요.
 
 ```tsx filename="MyActivity.tsx" copy
-import { ActivityComponentType } from "@stackflow/react";
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -135,11 +135,9 @@ replace(
 
 마지막으로 현재 액티비티를 삭제하고 이전 액티비티로 돌아가는 방법에 대해서 살펴봐요. `stackflow.ts`에서 생성했던 `useFlow()` 훅의 `pop()` 함수를 통해 다음과 같이 현재 액티비티를 삭제할 수 있어요.
 
-```tsx
-/**
- * Article.tsx
- */
-import { ActivityComponentType } from "@stackflow/react";
+
+```tsx showLineNumbers filename="Article.tsx" copy /pop/
+import type { ActivityComponentType } from "@stackflow/react";
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 import { useFlow } from "./stackflow";
 
@@ -150,15 +148,22 @@ type ArticleParams = {
 const Article: ActivityComponentType<ArticleParams> = ({ params }) => {
   const { pop } = useFlow();
 
-  const onClick = () => {
+  const goBack = () => {
+    // 액티비티 하나만 제거
     pop();
   };
 
+  const goBackMultiple = () => {
+    // 액티비티 여러 개 제거
+    pop(3);
+  };
+
   return (
     <AppScreen appBar={{ title: "Article" }}>
       <div>
         <h1>{params.title}</h1>
-        <button onClick={onClick}>back</button>
+        <button onClick={goBack}>Back</button>
+        <button onClick={goBackMultiple}>Back 3 Steps</button>
       </div>
     </AppScreen>
   );
@@ -167,15 +172,21 @@ const Article: ActivityComponentType<ArticleParams> = ({ params }) => {
 export default Article;
 ```
 
-`pop()`은 첫번째 파라미터로 추가 옵션을 받아요. 첫번째 파라미터인 추가 옵션은 선택적으로 넘기지 않을 수 있어요. (기본값을 사용해요)
+`pop()` 함수의 첫번째 파라미터는 제거할 액티비티의 개수를 지정하거나 추가 옵션을 정의할 수 있어요.
+첫번째 파라미터를 액티비티 개수로 사용하면, 두번째 매개변수는 추가 옵션을 전달하는 데 사용할 수 있어요.
 
 ```ts
-pop();
+pop(); // 액티비티 하나 제거
+
+pop(3); // 액티비티 여러 개 제거
 
-// 또는
 pop({
   /* 추가 옵션 */
-});
+}); // 추가 옵션과 함께 액티비티 하나 제거
+
+pop(3, {
+  /* 추가 옵션 */
+}); // 추가 옵션과 함께 액티비티 여러 개 제거
 ```
 
 `pop()` 함수의 첫번째 파라미터인 추가 옵션에는 다음과 같은 값이 있어요.
@@ -188,4 +199,4 @@ pop({
 
 ---
 
-액티비티를 쌓고, 교체하고, 삭제하는 방법에 대해서 알아봤어요. 이제 액티비티 내의 가상의 스택을 만들 수 있는 방법에 대해 알아봐요.
+액티비티를 쌓고, 교체하고, 삭제하는 방법에 대해서 알아봤어요. 이제 액티비티 내의 가상의 스택을 만들 수 있는 방법에 대해 알아봐요.