Conversation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: af01cd8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 17 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughPromotes the Future API to the default Stackflow 2.0 surface: removes stable/future subpath exports, deletes three deprecated extension packages, consolidates React/link integration exports and internal paths, updates demo and extensions to new imports/hooks, and adds detailed migration/spec and docs changes for the v2 release. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes ✨ Finishing Touches🧪 Generate unit tests (beta)
|
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
stackflow-docs | af01cd8 | Commit Preview URL | Apr 10 2026, 10:04 AM |
Deploying stackflow-demo with
|
| Latest commit: |
af01cd8
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0531d1bc.stackflow-demo.pages.dev |
| Branch Preview URL: | https://tony-future-to-stable-plan.stackflow-demo.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
.tech-specs/tasks/04-link-promote-future.md (1)
3-3: Add PR 1 as a prerequisite for consistency.Line 52 removes the
@stackflow/plugin-preloadpeerDependency, but that package is deleted in PR 1. While the task can technically complete without PR 1 (by just removing the dependency entry), explicitly listing PR 1 as a prerequisite would clarify the dependency chain and ensure the package is already deleted.📝 Suggested clarification
-> 선행 PR: PR 3 (`@stackflow/react` 승격 완료 필요 — future Link가 react/future의 훅을 사용) +> 선행 PR: PR 1 (패키지 삭제), PR 3 (`@stackflow/react` 승격 완료 필요 — future Link가 react/future의 훅을 사용)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.tech-specs/tasks/04-link-promote-future.md at line 3, Add PR 1 as an explicit prerequisite: update the task header/prerequisites to list PR 1 (which deletes the `@stackflow/plugin-preload` package) before this task so the removal of the peerDependency on line 52 makes sense; specifically mention PR 1 alongside the existing PR 3 reference and call out that `@stackflow/plugin-preload` must be deleted first to avoid confusion..tech-specs/tasks/02-react-inline-internal.md (1)
30-36: Add language identifier to fenced code block.For markdown lint compliance and better rendering, specify a language for the code fence.
📋 Suggested fix
-``` +```plaintext integrations/react/src/__internal__/ ├── StructuredActivityComponentType.tsx ├── ActivityComponentType.ts🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.tech-specs/tasks/02-react-inline-internal.md around lines 30 - 36, The fenced code block showing the internal directory listing (including filenames StructuredActivityComponentType.tsx, ActivityComponentType.ts, MonolithicActivityComponentType.ts) lacks a language identifier; update the opening fence from ``` to a language marker (e.g., ```plaintext or ```text) so the block becomes ```plaintext and complies with markdown linting and improves rendering..tech-specs/future-to-stable-migration.md (1)
320-330: Add language identifier to fenced code blocks.For markdown lint compliance, the code blocks showing file paths should have language identifiers.
📋 Suggested fix
### 삭제 -``` +```plaintext integrations/react/src/stable/ # 디렉토리 전체Apply the same to the other two code blocks (lines 333, 346).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.tech-specs/future-to-stable-migration.md around lines 320 - 330, The fenced code blocks that list file paths (for example the block containing "integrations/react/src/stable/ # 디렉토리 전체" and the other similar blocks showing "extensions/link/src/stable/" and "docs/pages/api-references/future-api/") lack a language identifier; update each fenced block to include a language tag such as ```plaintext so they comply with markdown linting (apply the same change to every fenced block that contains file-path listings).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.tech-specs/future-to-stable-migration.md:
- Around line 270-291: The task file
.tech-specs/tasks/01-delete-deprecated-packages.md conflicts with the phased
plan: update that task to require the Phase 1 cleanup PRs (the changes that
move/delete integrations/react/src/stable and extensions/link/src/stable and
update integrations/react/src/index.ts) before deleting packages
`@stackflow/compat-await-push`, `@stackflow/plugin-preload`, and
`@stackflow/plugin-map-initial-activity` (steps 10–12), or conversely move those
deletions into Phase 1/2; specifically add a prerequisite noting PR that
removes/updates extensions/link/src/stable/Link.tsx usage of
`@stackflow/plugin-preload` so deletion cannot happen until Link.tsx no longer
imports it.
In @.tech-specs/tasks/01-delete-deprecated-packages.md:
- Around line 20-29: The task misses handling active imports/usages of
`@stackflow/plugin-preload` in the stable Link implementation; update
extensions/link/src/stable/Link.tsx to remove the import and any direct
calls/usages of plugin-preload, replacing them with the new usePrepare() hook
(or an equivalent no-op fallback) so the stable implementation compiles after
deleting the package, and then update `@stackflow/link` peerDependencies and any
references as described; specifically, search for imports of
"@stackflow/plugin-preload" and usages inside the Link component
(extensions/link/src/stable/Link.tsx) and refactor those call sites to use
usePrepare() or guard them with a fallback before deleting the package and docs.
- Line 3: The PR deletes `@stackflow/plugin-preload` while stable Link
implementation still imports and uses usePreloader in
extensions/link/src/stable/Link.tsx, which will break the build; update the PR
to either add the Phase 1 prerequisite (remove or refactor the stable Link code
that references usePreloader), defer the package deletion until after Phase 1
completes, or document in future-to-stable-migration.md that Phase 1 and Phase 3
are intentionally combined and show the combined change set removing
usePreloader usages and the package simultaneously so the dependency removal
does not leave broken imports.
---
Nitpick comments:
In @.tech-specs/future-to-stable-migration.md:
- Around line 320-330: The fenced code blocks that list file paths (for example
the block containing "integrations/react/src/stable/ # 디렉토리 전체" and
the other similar blocks showing "extensions/link/src/stable/" and
"docs/pages/api-references/future-api/") lack a language identifier; update each
fenced block to include a language tag such as ```plaintext so they comply with
markdown linting (apply the same change to every fenced block that contains
file-path listings).
In @.tech-specs/tasks/02-react-inline-internal.md:
- Around line 30-36: The fenced code block showing the internal directory
listing (including filenames StructuredActivityComponentType.tsx,
ActivityComponentType.ts, MonolithicActivityComponentType.ts) lacks a language
identifier; update the opening fence from ``` to a language marker (e.g.,
```plaintext or ```text) so the block becomes ```plaintext and complies with
markdown linting and improves rendering.
In @.tech-specs/tasks/04-link-promote-future.md:
- Line 3: Add PR 1 as an explicit prerequisite: update the task
header/prerequisites to list PR 1 (which deletes the `@stackflow/plugin-preload`
package) before this task so the removal of the peerDependency on line 52 makes
sense; specifically mention PR 1 alongside the existing PR 3 reference and call
out that `@stackflow/plugin-preload` must be deleted first to avoid confusion.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 5f967ecf-c6ed-4914-91d9-1b591fcd3dfe
📒 Files selected for processing (8)
.tech-specs/future-to-stable-migration.md.tech-specs/tasks/01-delete-deprecated-packages.md.tech-specs/tasks/02-react-inline-internal.md.tech-specs/tasks/03-react-promote-future.md.tech-specs/tasks/04-link-promote-future.md.tech-specs/tasks/05-update-demo.md.tech-specs/tasks/06-update-docs.md.tech-specs/tasks/07-changesets-release.md
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
extensions/link/src/stable/Link.tsx (1)
39-50:⚠️ Potential issue | 🟠 MajorAdd
urlPatternOptionstouseMemodependencies.
hrefusesprops.urlPatternOptions(Line 46), but it is missing from the dependency list (Line 50). This can leavehrefstale when options change.Proposed fix
- }, [routes, props.activityName, props.activityParams]); + }, [routes, props.activityName, props.activityParams, props.urlPatternOptions]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@extensions/link/src/stable/Link.tsx` around lines 39 - 50, The memoized computation for href (inside useMemo) omits props.urlPatternOptions from its dependency array, which can cause href to become stale; update the dependency array for the useMemo that computes href to include props.urlPatternOptions so that when urlPatternOptions changes the memo reruns (locate the useMemo that references makeTemplate, template.fill, and props.activityParams and add props.urlPatternOptions to its dependencies).
🧹 Nitpick comments (1)
extensions/link/src/stable/Link.tsx (1)
5-7: Remove redundant internal anchor ref after preload removal.
anchorRefis no longer read locally, souseRef+mergeRefscan be simplified to forwardingrefdirectly.Proposed cleanup
-import { forwardRef, useMemo, useRef } from "react"; +import { forwardRef, useMemo } from "react"; - -import { mergeRefs } from "./mergeRefs"; import { omit } from "./omit"; @@ - const anchorRef = useRef<HTMLAnchorElement>(null); @@ - ref={mergeRefs(ref, anchorRef)} + ref={ref}Also applies to: 37-37, 103-103
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@extensions/link/src/stable/Link.tsx` around lines 5 - 7, The Link component no longer uses the local anchorRef, so remove the useRef-based anchorRef and the mergeRefs usage: update the forwardRef signature to pass the forwarded ref directly to the anchor element (remove mergeRefs(anchorRef, ref) and any anchorRef reads), delete the mergeRefs import if it becomes unused, and clean up any related anchorRef declarations (e.g., in the Link function and any handlers referencing anchorRef) so the component only uses the forwarded ref.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@extensions/link/src/stable/Link.tsx`:
- Around line 39-50: The memoized computation for href (inside useMemo) omits
props.urlPatternOptions from its dependency array, which can cause href to
become stale; update the dependency array for the useMemo that computes href to
include props.urlPatternOptions so that when urlPatternOptions changes the memo
reruns (locate the useMemo that references makeTemplate, template.fill, and
props.activityParams and add props.urlPatternOptions to its dependencies).
---
Nitpick comments:
In `@extensions/link/src/stable/Link.tsx`:
- Around line 5-7: The Link component no longer uses the local anchorRef, so
remove the useRef-based anchorRef and the mergeRefs usage: update the forwardRef
signature to pass the forwarded ref directly to the anchor element (remove
mergeRefs(anchorRef, ref) and any anchorRef reads), delete the mergeRefs import
if it becomes unused, and clean up any related anchorRef declarations (e.g., in
the Link function and any handlers referencing anchorRef) so the component only
uses the forwarded ref.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 4492a4ad-ec76-45a4-a19a-65229a4a1ac6
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (101)
.pnp.cjsdemo/package.jsondocs/pages/api-references/plugins/_meta.en.jsondocs/pages/api-references/plugins/_meta.ko.jsondocs/pages/api-references/plugins/plugin-map-initial-activity.en.mdxdocs/pages/api-references/plugins/plugin-map-initial-activity.ko.mdxdocs/pages/api-references/plugins/plugin-preload.en.mdxdocs/pages/api-references/plugins/plugin-preload.ko.mdxextensions/compat-await-push/CHANGELOG.mdextensions/compat-await-push/README.mdextensions/compat-await-push/esbuild.config.jsextensions/compat-await-push/package.jsonextensions/compat-await-push/src/index.tsextensions/compat-await-push/src/receive.tsextensions/compat-await-push/src/resolveMap.tsextensions/compat-await-push/src/send.tsextensions/compat-await-push/tsconfig.jsonextensions/link/package.jsonextensions/link/src/stable/Link.tsxextensions/plugin-map-initial-activity/CHANGELOG.mdextensions/plugin-map-initial-activity/README.mdextensions/plugin-map-initial-activity/esbuild.config.jsextensions/plugin-map-initial-activity/package.jsonextensions/plugin-map-initial-activity/src/index.tsextensions/plugin-map-initial-activity/src/mapInitialActivityPlugin.tsxextensions/plugin-map-initial-activity/tsconfig.jsonextensions/plugin-preload/CHANGELOG.mdextensions/plugin-preload/README.mdextensions/plugin-preload/esbuild.config.jsextensions/plugin-preload/package.jsonextensions/plugin-preload/src/Loader.tsextensions/plugin-preload/src/LoadersContext.tsxextensions/plugin-preload/src/createPreloader.tsextensions/plugin-preload/src/index.tsextensions/plugin-preload/src/pluginPreload.tsxextensions/plugin-preload/src/useActivityPreloadRef.tsextensions/plugin-preload/src/usePreloader.tsextensions/plugin-preload/tsconfig.jsonintegrations/react/src/future/ActivityComponentMapProvider.tsxintegrations/react/src/future/ActivityComponentType.tsxintegrations/react/src/future/BaseActivityComponentType.tsintegrations/react/src/future/BaseStaticActivityComponentType.tsintegrations/react/src/future/LazyActivityComponentType.tsintegrations/react/src/future/MainRenderer.tsxintegrations/react/src/future/MonolithicActivityComponentType.tsintegrations/react/src/future/PluginRenderer.tsxintegrations/react/src/future/StackflowReactPlugin.tsintegrations/react/src/future/StaticActivityComponentType.tsintegrations/react/src/future/StructuredActivityComponentType.tsxintegrations/react/src/future/activity/ActivityProvider.tsxintegrations/react/src/future/activity/findActivityById.tsintegrations/react/src/future/activity/findLatestActiveActivity.tsintegrations/react/src/future/activity/index.tsintegrations/react/src/future/activity/makeActivityId.tsintegrations/react/src/future/activity/makeStepId.tsintegrations/react/src/future/activity/useActivity.tsintegrations/react/src/future/activity/useActivityParams.tsintegrations/react/src/future/core/CoreProvider.tsxintegrations/react/src/future/core/index.tsintegrations/react/src/future/core/useCoreActions.tsintegrations/react/src/future/core/useCoreState.tsintegrations/react/src/future/index.tsintegrations/react/src/future/lazy.tsxintegrations/react/src/future/loader/loaderPlugin.tsxintegrations/react/src/future/loader/useLoaderData.tsintegrations/react/src/future/makeActions.tsintegrations/react/src/future/makeStepActions.tsintegrations/react/src/future/plugins/PluginsProvider.tsxintegrations/react/src/future/plugins/index.tsintegrations/react/src/future/plugins/usePlugins.tsintegrations/react/src/future/shims/index.tsintegrations/react/src/future/shims/useDeferredValue.tsintegrations/react/src/future/shims/useSyncExternalStore.tsintegrations/react/src/future/shims/useTransition.tsintegrations/react/src/future/stack/StackProvider.tsxintegrations/react/src/future/stack/index.tsintegrations/react/src/future/stack/useStack.tsintegrations/react/src/future/stackflow.tsxintegrations/react/src/future/useActivityParams.tsintegrations/react/src/future/useFlow.tsintegrations/react/src/future/usePrepare.tsintegrations/react/src/future/useStepFlow.tsintegrations/react/src/future/utils/PreloadableLazyComponent.tsxintegrations/react/src/future/utils/SyncInspectablePromise.tsintegrations/react/src/future/utils/WithRequired.tsintegrations/react/src/future/utils/index.tsintegrations/react/src/future/utils/isBrowser.tsintegrations/react/src/future/utils/isPromiseLike.tsintegrations/react/src/future/utils/isServer.tsintegrations/react/src/future/utils/makeRef.tsintegrations/react/src/future/utils/noop.tsintegrations/react/src/future/utils/useMemoDeep.tsintegrations/react/src/future/utils/useThenable.tsintegrations/react/src/stable/BaseActivities.tsintegrations/react/src/stable/index.tsintegrations/react/src/stable/stackflow.tsxintegrations/react/src/stable/useActions.tsintegrations/react/src/stable/useActiveEffect.tsintegrations/react/src/stable/useEnterDoneEffect.tsintegrations/react/src/stable/useStep.tsintegrations/react/src/stable/useStepActions.ts
💤 Files with no reviewable changes (37)
- demo/package.json
- extensions/link/package.json
- extensions/compat-await-push/tsconfig.json
- docs/pages/api-references/plugins/_meta.ko.json
- extensions/compat-await-push/README.md
- docs/pages/api-references/plugins/_meta.en.json
- extensions/compat-await-push/src/send.ts
- extensions/compat-await-push/src/resolveMap.ts
- extensions/plugin-map-initial-activity/README.md
- extensions/plugin-preload/src/Loader.ts
- extensions/plugin-map-initial-activity/src/index.ts
- extensions/plugin-map-initial-activity/tsconfig.json
- docs/pages/api-references/plugins/plugin-map-initial-activity.ko.mdx
- extensions/plugin-preload/src/useActivityPreloadRef.ts
- extensions/plugin-map-initial-activity/CHANGELOG.md
- extensions/compat-await-push/CHANGELOG.md
- extensions/compat-await-push/src/receive.ts
- extensions/plugin-preload/CHANGELOG.md
- extensions/compat-await-push/src/index.ts
- docs/pages/api-references/plugins/plugin-map-initial-activity.en.mdx
- extensions/plugin-preload/README.md
- extensions/plugin-preload/esbuild.config.js
- docs/pages/api-references/plugins/plugin-preload.ko.mdx
- docs/pages/api-references/plugins/plugin-preload.en.mdx
- .pnp.cjs
- extensions/plugin-preload/src/createPreloader.ts
- extensions/plugin-preload/src/index.ts
- extensions/plugin-preload/src/LoadersContext.tsx
- extensions/compat-await-push/package.json
- extensions/plugin-map-initial-activity/src/mapInitialActivityPlugin.tsx
- extensions/plugin-preload/package.json
- extensions/plugin-map-initial-activity/package.json
- extensions/plugin-map-initial-activity/esbuild.config.js
- extensions/plugin-preload/src/pluginPreload.tsx
- extensions/plugin-preload/src/usePreloader.ts
- extensions/compat-await-push/esbuild.config.js
- extensions/plugin-preload/tsconfig.json
✅ Files skipped from review due to trivial changes (16)
- integrations/react/src/future/makeActions.ts
- integrations/react/src/future/makeStepActions.ts
- integrations/react/src/future/useStepFlow.ts
- integrations/react/src/future/useFlow.ts
- integrations/react/src/future/ActivityComponentMapProvider.tsx
- integrations/react/src/stable/BaseActivities.ts
- integrations/react/src/future/ActivityComponentType.tsx
- integrations/react/src/future/usePrepare.ts
- integrations/react/src/stable/useStepActions.ts
- integrations/react/src/stable/useActions.ts
- integrations/react/src/stable/useEnterDoneEffect.ts
- integrations/react/src/future/lazy.tsx
- integrations/react/src/stable/stackflow.tsx
- integrations/react/src/future/stackflow.tsx
- integrations/react/src/future/loader/loaderPlugin.tsx
- integrations/react/src/future/loader/useLoaderData.ts
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@AGENTS.md`:
- Line 137: Remove the exported "actions" from the documentation snippet so it
only advertises the current API: change the export to only include Stack by
updating the setup line that currently reads export const { Stack, actions } =
stackflow({ ... }) to export only Stack (i.e., export const { Stack } =
stackflow(...)); ensure references to "actions" elsewhere in the snippet are
removed or reworded to avoid mixed navigation guidance and reflect the updated
usage of stackflow.
- Around line 161-175: The example's types are inconsistent: you registered
MyActivity in the declared module Register but the component calls
push("Article"...), so either add an Article entry to Register or change the
push target to the registered activity; for the minimal fix update the onClick
in the MyActivity ActivityComponentType to call push("MyActivity", { title:
"Hello" }) (symbols: declare module Register, MyActivity, ActivityComponentType,
useFlow, push, Article).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 90b4759b-8163-425c-97ad-a109c8e227a3
📒 Files selected for processing (101)
AGENTS.mddemo/src/activities/Article/Article.content.tsxdemo/src/activities/Article/Article.layout.tsxdemo/src/activities/Article/Article.loading.tsxdemo/src/activities/Article/Article.tsxdemo/src/activities/Main/Main.tsxdemo/src/components/ArticleCard.tsxdemo/src/components/FeedCard.tsxdemo/src/stackflow/Stack.tsxdemo/src/stackflow/stackflow.docs.tsextensions/link/package.jsonextensions/link/src/Link.tsxextensions/link/src/future/index.tsextensions/link/src/index.tsextensions/link/src/omit.tsextensions/link/src/stable/Link.tsxextensions/link/src/stable/createLinkComponent.tsxextensions/link/src/stable/index.tsextensions/link/src/stable/mergeRefs.tsextensions/link/src/stable/omit.tsextensions/plugin-basic-ui/src/components/AppBar.tsxextensions/plugin-basic-ui/src/components/AppScreen.tsxextensions/plugin-basic-ui/src/components/BottomSheet.tsxextensions/plugin-basic-ui/src/components/Modal.tsxextensions/plugin-blocker/src/blockerPlugin.spec.tsxextensions/plugin-history-sync/src/RouteLike.tsextensions/plugin-history-sync/src/RoutesContext.tsxextensions/plugin-history-sync/src/historySyncPlugin.tsxintegrations/react/package.jsonintegrations/react/src/Actions.tsintegrations/react/src/ActivityComponentMapProvider.tsxintegrations/react/src/ActivityComponentType.tsxintegrations/react/src/BaseActivityComponentType.tsintegrations/react/src/BaseStaticActivityComponentType.tsintegrations/react/src/ConfigProvider.tsxintegrations/react/src/LazyActivityComponentType.tsintegrations/react/src/MainRenderer.tsxintegrations/react/src/MonolithicActivityComponentType.tsintegrations/react/src/PluginRenderer.tsxintegrations/react/src/StackComponentType.tsintegrations/react/src/StackflowReactPlugin.tsintegrations/react/src/StaticActivityComponentType.tsintegrations/react/src/StepActions.tsintegrations/react/src/StructuredActivityComponentType.tsxintegrations/react/src/activity/ActivityProvider.tsxintegrations/react/src/activity/findActivityById.tsintegrations/react/src/activity/findLatestActiveActivity.tsintegrations/react/src/activity/index.tsintegrations/react/src/activity/makeActivityId.tsintegrations/react/src/activity/makeStepId.tsintegrations/react/src/activity/useActivity.tsintegrations/react/src/activity/useActivityParams.tsintegrations/react/src/core/CoreProvider.tsxintegrations/react/src/core/index.tsintegrations/react/src/core/useCoreActions.tsintegrations/react/src/core/useCoreState.tsintegrations/react/src/future/index.tsintegrations/react/src/index.tsintegrations/react/src/lazy.tsxintegrations/react/src/loader/DataLoaderContext.tsxintegrations/react/src/loader/index.tsintegrations/react/src/loader/loaderPlugin.tsxintegrations/react/src/loader/useLoaderData.tsintegrations/react/src/makeActions.tsintegrations/react/src/makeStepActions.tsintegrations/react/src/plugins/PluginsProvider.tsxintegrations/react/src/plugins/index.tsintegrations/react/src/plugins/usePlugins.tsintegrations/react/src/shims/index.tsintegrations/react/src/shims/useDeferredValue.tsintegrations/react/src/shims/useSyncExternalStore.tsintegrations/react/src/shims/useTransition.tsintegrations/react/src/stable/BaseActivities.tsintegrations/react/src/stable/index.tsintegrations/react/src/stable/stackflow.tsxintegrations/react/src/stable/useActions.tsintegrations/react/src/stable/useActiveEffect.tsintegrations/react/src/stable/useEnterDoneEffect.tsintegrations/react/src/stable/useStep.tsintegrations/react/src/stable/useStepActions.tsintegrations/react/src/stack/StackProvider.tsxintegrations/react/src/stack/index.tsintegrations/react/src/stack/useStack.tsintegrations/react/src/stackflow.tsxintegrations/react/src/useActivityParams.tsintegrations/react/src/useActivityPreparation.tsintegrations/react/src/useConfig.tsintegrations/react/src/useFlow.tsintegrations/react/src/usePrepare.tsintegrations/react/src/useStepFlow.tsintegrations/react/src/utils/PreloadableLazyComponent.tsxintegrations/react/src/utils/SyncInspectablePromise.tsintegrations/react/src/utils/WithRequired.tsintegrations/react/src/utils/index.tsintegrations/react/src/utils/isBrowser.tsintegrations/react/src/utils/isPromiseLike.tsintegrations/react/src/utils/isServer.tsintegrations/react/src/utils/makeRef.tsintegrations/react/src/utils/noop.tsintegrations/react/src/utils/useMemoDeep.tsintegrations/react/src/utils/useThenable.ts
💤 Files with no reviewable changes (17)
- extensions/link/src/stable/omit.ts
- extensions/link/src/future/index.ts
- extensions/link/src/stable/mergeRefs.ts
- extensions/link/src/stable/index.ts
- integrations/react/src/stable/BaseActivities.ts
- integrations/react/package.json
- extensions/link/src/stable/createLinkComponent.tsx
- extensions/link/src/stable/Link.tsx
- extensions/link/package.json
- integrations/react/src/stable/useEnterDoneEffect.ts
- integrations/react/src/stable/stackflow.tsx
- integrations/react/src/stable/useActiveEffect.ts
- integrations/react/src/stable/useStep.ts
- integrations/react/src/stable/useActions.ts
- integrations/react/src/stable/useStepActions.ts
- integrations/react/src/stable/index.ts
- integrations/react/src/future/index.ts
✅ Files skipped from review due to trivial changes (22)
- integrations/react/src/makeStepActions.ts
- demo/src/components/ArticleCard.tsx
- integrations/react/src/usePrepare.ts
- extensions/link/src/Link.tsx
- integrations/react/src/useFlow.ts
- demo/src/activities/Article/Article.layout.tsx
- extensions/plugin-history-sync/src/historySyncPlugin.tsx
- integrations/react/src/makeActions.ts
- integrations/react/src/useStepFlow.ts
- extensions/link/src/index.ts
- demo/src/activities/Main/Main.tsx
- demo/src/activities/Article/Article.loading.tsx
- integrations/react/src/LazyActivityComponentType.ts
- integrations/react/src/ActivityComponentMapProvider.tsx
- integrations/react/src/ActivityComponentType.tsx
- integrations/react/src/lazy.tsx
- integrations/react/src/stackflow.tsx
- integrations/react/src/loader/useLoaderData.ts
- integrations/react/src/loader/loaderPlugin.tsx
- integrations/react/src/StaticActivityComponentType.ts
- extensions/plugin-blocker/src/blockerPlugin.spec.tsx
- integrations/react/src/useActivityParams.ts
| transitionDuration: 350, | ||
| import { stackflow } from "@stackflow/react"; | ||
|
|
||
| export const { Stack, actions } = stackflow({ |
There was a problem hiding this comment.
Drop actions from this setup snippet to avoid mixed navigation guidance.
Line 137 currently advertises an extra API that the updated docs no longer use. Keeping only Stack makes the migration story clearer.
✏️ Suggested doc tweak
-export const { Stack, actions } = stackflow({
+export const { Stack } = stackflow({📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const { Stack, actions } = stackflow({ | |
| export const { Stack } = stackflow({ |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@AGENTS.md` at line 137, Remove the exported "actions" from the documentation
snippet so it only advertises the current API: change the export to only include
Stack by updating the setup line that currently reads export const { Stack,
actions } = stackflow({ ... }) to export only Stack (i.e., export const { Stack
} = stackflow(...)); ensure references to "actions" elsewhere in the snippet are
removed or reworded to avoid mixed navigation guidance and reflect the updated
usage of stackflow.
| declare module "@stackflow/config" { | ||
| interface Register { | ||
| MyActivity: { | ||
| title: string; | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| const MyActivity: ActivityComponentType<"MyActivity"> = () => { | ||
| const { push } = useFlow(); | ||
|
|
||
| const onClick = () => { | ||
| push("Article", { | ||
| title: "Hello", | ||
| }); |
There was a problem hiding this comment.
The typed activity example is inconsistent (Register defines MyActivity, but navigation pushes Article).
For a copy-pastable strict-typing example, either register Article too or push MyActivity here.
✏️ One possible doc fix
declare module "@stackflow/config" {
interface Register {
MyActivity: {
title: string;
};
+ Article: {
+ title: string;
+ };
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| declare module "@stackflow/config" { | |
| interface Register { | |
| MyActivity: { | |
| title: string; | |
| }; | |
| } | |
| } | |
| const MyActivity: ActivityComponentType<"MyActivity"> = () => { | |
| const { push } = useFlow(); | |
| const onClick = () => { | |
| push("Article", { | |
| title: "Hello", | |
| }); | |
| declare module "@stackflow/config" { | |
| interface Register { | |
| MyActivity: { | |
| title: string; | |
| }; | |
| Article: { | |
| title: string; | |
| }; | |
| } | |
| } | |
| const MyActivity: ActivityComponentType<"MyActivity"> = () => { | |
| const { push } = useFlow(); | |
| const onClick = () => { | |
| push("Article", { | |
| title: "Hello", | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@AGENTS.md` around lines 161 - 175, The example's types are inconsistent: you
registered MyActivity in the declared module Register but the component calls
push("Article"...), so either add an Article entry to Register or change the
push target to the registered activity; for the minimal fix update the onClick
in the MyActivity ActivityComponentType to call push("MyActivity", { title:
"Hello" }) (symbols: declare module Register, MyActivity, ActivityComponentType,
useFlow, push, Article).
@stackflow/link
@stackflow/plugin-basic-ui
@stackflow/plugin-blocker
@stackflow/plugin-google-analytics-4
@stackflow/plugin-history-sync
@stackflow/plugin-lifecycle
@stackflow/plugin-renderer-basic
@stackflow/plugin-renderer-web
@stackflow/react-ui-core
@stackflow/react
commit: |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
.changeset/nine-rabbits-jam.md (1)
26-26: Consider more specific migration guidance for@stackflow/compat-await-push.The guidance "Use event-based patterns instead" is somewhat vague for developers migrating from this package. Consider adding a brief example or reference to documentation showing the specific event-based pattern to use (e.g., which lifecycle hooks or events to listen to).
📝 Suggested improvement
-`@stackflow/compat-await-push` — Use event-based patterns instead. +`@stackflow/compat-await-push` — Use event-based patterns instead (e.g., plugin lifecycle hooks like `onPushed`, `onPopped`).Based on learnings: Plugins can extend functionality by hooking into lifecycle events such as onInit, onBeforePush, onPushed, onBeforePop, onPopped, and step-related events.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.changeset/nine-rabbits-jam.md at line 26, Update the `.changeset/nine-rabbits-jam.md` entry for `@stackflow/compat-await-push` to replace the vague "Use event-based patterns instead" line with concrete migration guidance: mention the specific lifecycle hooks/plugins to use (for example onInit, onBeforePush, onPushed, onBeforePop, onPopped and step-related events), give a short one-line example pointer such as "listen to onBeforePush to intercept push and onPushed to react after completion", and add a link or reference to the plugin/lifecycle documentation so developers can see full examples and APIs.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In @.changeset/nine-rabbits-jam.md:
- Line 26: Update the `.changeset/nine-rabbits-jam.md` entry for
`@stackflow/compat-await-push` to replace the vague "Use event-based patterns
instead" line with concrete migration guidance: mention the specific lifecycle
hooks/plugins to use (for example onInit, onBeforePush, onPushed, onBeforePop,
onPopped and step-related events), give a short one-line example pointer such as
"listen to onBeforePush to intercept push and onPushed to react after
completion", and add a link or reference to the plugin/lifecycle documentation
so developers can see full examples and APIs.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 4ac4dd7a-c505-4e25-920e-dcfa37d084b2
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (2)
.changeset/nine-rabbits-jam.md.pnp.cjs
💤 Files with no reviewable changes (1)
- .pnp.cjs
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
docs/pages/docs/get-started/getting-state.en.mdx (2)
70-99:⚠️ Potential issue | 🟡 MinorMissing
useEffectimport in example.Similar to the previous example,
useEffectis used on line 84 but not imported.📝 Proposed fix
-import { useActivity, useFlow, type ActivityComponentType } from "@stackflow/react"; +import { useEffect } from "react"; +import { useActivity, useFlow, type ActivityComponentType } from "@stackflow/react";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/pages/docs/get-started/getting-state.en.mdx` around lines 70 - 99, The example component uses useEffect but doesn't import it; update the imports for MyActivity (the top of the snippet with useActivity, useFlow, ActivityComponentType) to also import useEffect from 'react' (e.g., add a React import or add "import { useEffect } from 'react'") so the useEffect call in MyActivity works correctly.
20-54:⚠️ Potential issue | 🟡 MinorMissing
useEffectimport in example.The code example uses
useEffecton line 34 but doesn't include it in the imports. This would cause a runtime error if copied directly.📝 Proposed fix
-import { useStack, useFlow, type ActivityComponentType } from "@stackflow/react"; +import { useEffect } from "react"; +import { useStack, useFlow, type ActivityComponentType } from "@stackflow/react";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/pages/docs/get-started/getting-state.en.mdx` around lines 20 - 54, The example component uses useEffect but the import list for React hooks only contains useStack and useFlow; update the import statement that currently imports useStack and useFlow (from "@stackflow/react") to also import useEffect from "react" or add useEffect to the React import so that the MyActivity component's useEffect call is defined (ensure the import line referencing useStack, useFlow, and ActivityComponentType is adjusted accordingly).
🧹 Nitpick comments (2)
docs/pages/docs/get-started/navigating-activities.ko.mdx (1)
138-172: Inconsistent activity typing pattern.Line 147 uses the old pattern
ActivityComponentType<ArticleParams>with a locally defined type, while other documentation files in this PR use the new string literal patternActivityComponentType<"Article">with module augmentation.For consistency with the migration direction (e.g.,
docs/pages/docs/get-started/activity.en.mdxanddocs/pages/docs/get-started/navigating-step.en.mdx), consider updating this example to use the new pattern.♻️ Suggested update for consistency
-type ArticleParams = { - title: string; -}; - -const Article: ActivityComponentType<ArticleParams> = ({ params }) => { +declare module "@stackflow/config" { + interface Register { + Article: { + title: string; + }; + } +} + +const Article: ActivityComponentType<"Article"> = ({ params }) => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/pages/docs/get-started/navigating-activities.ko.mdx` around lines 138 - 172, The Article component uses the old generic pattern ActivityComponentType<ArticleParams>; change it to the new string-literal pattern ActivityComponentType<"Article"> and move the params shape into module augmentation instead of a local ArticleParams type: update the component signature const Article: ActivityComponentType<"Article"> = ({ params }) => { ... } and add/adjust the module augmentation declaration (declare module "@stackflow/react" { interface ActivityParamsMap { Article: { title: string } } }) so params.title remains typed; ensure goBack and goBackMultiple (which call pop()/pop(3)) keep working with useFlow/pop.docs/pages/docs/get-started/installation.en.mdx (1)
10-12: Use Yarn-first install command to match repo tooling policy.Line 11 currently uses
npm install. If this guide should follow repository conventions, switch to Yarn Berry command style.Suggested change
-npm install `@stackflow/config` `@stackflow/core` `@stackflow/react` +yarn add `@stackflow/config` `@stackflow/core` `@stackflow/react`Based on learnings: Use yarn commands exclusively, not npm (project uses Yarn Berry v4).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/pages/docs/get-started/installation.en.mdx` around lines 10 - 12, Replace the npm installation line that currently reads "npm install `@stackflow/config` `@stackflow/core` `@stackflow/react`" with the Yarn Berry equivalent by updating the code block to use "yarn add `@stackflow/config` `@stackflow/core` `@stackflow/react`" so the installation command follows the repository's Yarn-first tooling policy; locate the code block containing the exact string "npm install `@stackflow/config` `@stackflow/core` `@stackflow/react`" and swap it accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/pages/docs/advanced/history-sync.en.mdx`:
- Around line 62-68: Update the APITable for historySyncPlugin to document all
supported options: mark fallbackActivity as required; replace the single
"config" row with a required "config or routes" entry (explain that routes is a
legacy alternative to config); and add rows for optional useHash, history, and
urlPatternOptions (briefly indicate their purposes). Ensure the table uses the
exact option names historySyncPlugin, fallbackActivity, config, routes, useHash,
history, and urlPatternOptions so readers can map them to the API.
In `@docs/pages/docs/advanced/preloading.ko.mdx`:
- Around line 39-43: The file uses a type-only import for homeActivityLoader but
also references typeof homeActivityLoader at runtime, which causes a TS compile
error; replace the type-only import "import type { homeActivityLoader }" with a
normal import (so the value symbol exists at runtime) so the call
useLoaderData<typeof homeActivityLoader>() compiles; update the import statement
that brings in homeActivityLoader accordingly.
In `@docs/pages/docs/advanced/resolving-circular-reference.en.mdx`:
- Line 7: The prose and example diverge: the sentence claims you should export
activity types from your stackflow setup but the example instead shows passing
config directly to useActions(). Either update the text to say you can pass the
stackflow config directly to useActions() (and remove mention of exporting a
type), or change the example to export a named type alias (e.g., ActivityTypes)
from your stackflow setup and then use that alias with
useActions<ActivityTypes>(); update wherever useActions(), config, and the
exported alias are referenced so the wording and code match.
In `@docs/pages/docs/advanced/resolving-circular-reference.ko.mdx`:
- Line 7: Update the sentence mentioning "타입 export" to match the example that
shows passing the config directly: change the text around useActions() to
explain that in the shown example you pass the stackflow config directly to your
custom wrapper (e.g., by forwarding the config), or alternatively replace the
example with one that actually demonstrates exporting and importing activity
types; update references to useActions() and config in the paragraph so the
description and the code sample are consistent.
In `@docs/pages/docs/get-started/activity.ko.mdx`:
- Line 35: Fix Korean orthography in the user-facing sentences by replacing "에요"
with standard "예요" in the sentence containing "액티비티는 `ActivityComponentType`이라는
타입으로 선언되는 리액트 컴포넌트에요." and replace "않을거에요" with properly spaced and spelled "않을
거예요" where that phrase appears (line ~100) so that both user-facing lines use
standard spacing and honorific spelling.
---
Outside diff comments:
In `@docs/pages/docs/get-started/getting-state.en.mdx`:
- Around line 70-99: The example component uses useEffect but doesn't import it;
update the imports for MyActivity (the top of the snippet with useActivity,
useFlow, ActivityComponentType) to also import useEffect from 'react' (e.g., add
a React import or add "import { useEffect } from 'react'") so the useEffect call
in MyActivity works correctly.
- Around line 20-54: The example component uses useEffect but the import list
for React hooks only contains useStack and useFlow; update the import statement
that currently imports useStack and useFlow (from "@stackflow/react") to also
import useEffect from "react" or add useEffect to the React import so that the
MyActivity component's useEffect call is defined (ensure the import line
referencing useStack, useFlow, and ActivityComponentType is adjusted
accordingly).
---
Nitpick comments:
In `@docs/pages/docs/get-started/installation.en.mdx`:
- Around line 10-12: Replace the npm installation line that currently reads "npm
install `@stackflow/config` `@stackflow/core` `@stackflow/react`" with the Yarn Berry
equivalent by updating the code block to use "yarn add `@stackflow/config`
`@stackflow/core` `@stackflow/react`" so the installation command follows the
repository's Yarn-first tooling policy; locate the code block containing the
exact string "npm install `@stackflow/config` `@stackflow/core` `@stackflow/react`"
and swap it accordingly.
In `@docs/pages/docs/get-started/navigating-activities.ko.mdx`:
- Around line 138-172: The Article component uses the old generic pattern
ActivityComponentType<ArticleParams>; change it to the new string-literal
pattern ActivityComponentType<"Article"> and move the params shape into module
augmentation instead of a local ArticleParams type: update the component
signature const Article: ActivityComponentType<"Article"> = ({ params }) => {
... } and add/adjust the module augmentation declaration (declare module
"@stackflow/react" { interface ActivityParamsMap { Article: { title: string } }
}) so params.title remains typed; ensure goBack and goBackMultiple (which call
pop()/pop(3)) keep working with useFlow/pop.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 422b85e5-de99-4dff-94b4-1cf8ba1c6bbe
⛔ Files ignored due to path filters (1)
docs/pages/api-references/future-api/api-pipelining-diagram-1.pngis excluded by!**/*.png
📒 Files selected for processing (43)
docs/pages/api-references/_meta.en.jsondocs/pages/api-references/_meta.ko.jsondocs/pages/api-references/config.en.mdxdocs/pages/api-references/config.ko.mdxdocs/pages/api-references/future-api/_meta.en.jsondocs/pages/api-references/future-api/_meta.ko.jsondocs/pages/api-references/future-api/changes.en.mdxdocs/pages/api-references/future-api/changes.ko.mdxdocs/pages/api-references/future-api/code-splitting.ko.mdxdocs/pages/api-references/future-api/introduction.en.mdxdocs/pages/api-references/future-api/introduction.ko.mdxdocs/pages/api-references/plugins/link.en.mdxdocs/pages/api-references/plugins/link.ko.mdxdocs/pages/docs/_meta.en.jsondocs/pages/docs/_meta.ko.jsondocs/pages/docs/advanced/_meta.en.jsondocs/pages/docs/advanced/_meta.ko.jsondocs/pages/docs/advanced/api-pipelining.en.mdxdocs/pages/docs/advanced/api-pipelining.ko.mdxdocs/pages/docs/advanced/code-splitting.en.mdxdocs/pages/docs/advanced/code-splitting.ko.mdxdocs/pages/docs/advanced/history-sync.en.mdxdocs/pages/docs/advanced/history-sync.ko.mdxdocs/pages/docs/advanced/loader-api.en.mdxdocs/pages/docs/advanced/loader-api.ko.mdxdocs/pages/docs/advanced/preloading.en.mdxdocs/pages/docs/advanced/preloading.ko.mdxdocs/pages/docs/advanced/resolving-circular-reference.en.mdxdocs/pages/docs/advanced/resolving-circular-reference.ko.mdxdocs/pages/docs/advanced/structured-activity.en.mdxdocs/pages/docs/advanced/structured-activity.ko.mdxdocs/pages/docs/get-started/activity.en.mdxdocs/pages/docs/get-started/activity.ko.mdxdocs/pages/docs/get-started/getting-state.en.mdxdocs/pages/docs/get-started/getting-state.ko.mdxdocs/pages/docs/get-started/installation.en.mdxdocs/pages/docs/get-started/installation.ko.mdxdocs/pages/docs/get-started/navigating-activities.en.mdxdocs/pages/docs/get-started/navigating-activities.ko.mdxdocs/pages/docs/get-started/navigating-step.en.mdxdocs/pages/docs/get-started/navigating-step.ko.mdxdocs/pages/docs/migration-v2.en.mdxdocs/pages/docs/migration-v2.ko.mdx
💤 Files with no reviewable changes (7)
- docs/pages/api-references/future-api/introduction.en.mdx
- docs/pages/api-references/future-api/_meta.ko.json
- docs/pages/api-references/future-api/introduction.ko.mdx
- docs/pages/api-references/future-api/_meta.en.json
- docs/pages/api-references/future-api/code-splitting.ko.mdx
- docs/pages/api-references/future-api/changes.en.mdx
- docs/pages/api-references/future-api/changes.ko.mdx
✅ Files skipped from review due to trivial changes (19)
- docs/pages/api-references/config.en.mdx
- docs/pages/api-references/config.ko.mdx
- docs/pages/docs/_meta.en.json
- docs/pages/docs/advanced/api-pipelining.en.mdx
- docs/pages/docs/advanced/loader-api.en.mdx
- docs/pages/docs/advanced/api-pipelining.ko.mdx
- docs/pages/docs/advanced/code-splitting.en.mdx
- docs/pages/api-references/_meta.ko.json
- docs/pages/docs/_meta.ko.json
- docs/pages/api-references/_meta.en.json
- docs/pages/docs/advanced/loader-api.ko.mdx
- docs/pages/docs/get-started/navigating-activities.en.mdx
- docs/pages/docs/advanced/_meta.en.json
- docs/pages/docs/advanced/code-splitting.ko.mdx
- docs/pages/docs/advanced/_meta.ko.json
- docs/pages/docs/advanced/structured-activity.ko.mdx
- docs/pages/docs/migration-v2.en.mdx
- docs/pages/docs/advanced/structured-activity.en.mdx
- docs/pages/docs/migration-v2.ko.mdx
| The `historySyncPlugin` accepts two options: `config` and `fallbackActivity`. | ||
|
|
||
| <APITable> | ||
| | | | | | ||
| | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | routes | `object` | Connects activities with URL templates. You can represent activity parameters as Path Parameters. If an activity's parameter is not in the URL template, it will automatically be represented as a Query Parameter. | | ||
| | config | `object` | The config object created with `defineConfig()`. Routes are read from the `route` field of each activity definition. | | ||
| | fallbackActivity | `function` | Determines which activity to navigate to if there is no matching URL when first entering. Typically, you create a 404 page and assign it here. | |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify historySyncPlugin option surface in source.
rg -n -C4 'type HistorySyncPluginOptions|fallbackActivity|useHash\?:|history\?:|urlPatternOptions\?:|routes:|config:' extensions/plugin-history-sync/src/historySyncPlugin.tsxRepository: daangn/stackflow
Length of output: 1657
Documentation for historySyncPlugin is incomplete.
Line 62 states the plugin accepts only config and fallbackActivity, but the actual API supports additional options. Update to reflect:
fallbackActivity(required)- Either
configorroutes(legacy alternative, required) - Optional fields:
useHash,history,urlPatternOptions
Suggested wording
-The `historySyncPlugin` accepts two options: `config` and `fallbackActivity`.
+`historySyncPlugin` requires `fallbackActivity` and either `config` or `routes` (legacy), with optional fields `useHash`, `history`, and `urlPatternOptions`.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| The `historySyncPlugin` accepts two options: `config` and `fallbackActivity`. | |
| <APITable> | |
| | | | | | |
| | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | |
| | routes | `object` | Connects activities with URL templates. You can represent activity parameters as Path Parameters. If an activity's parameter is not in the URL template, it will automatically be represented as a Query Parameter. | | |
| | config | `object` | The config object created with `defineConfig()`. Routes are read from the `route` field of each activity definition. | | |
| | fallbackActivity | `function` | Determines which activity to navigate to if there is no matching URL when first entering. Typically, you create a 404 page and assign it here. | | |
| `historySyncPlugin` requires `fallbackActivity` and either `config` or `routes` (legacy), with optional fields `useHash`, `history`, and `urlPatternOptions`. | |
| <APITable> | |
| | | | | | |
| | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | |
| | config | `object` | The config object created with `defineConfig()`. Routes are read from the `route` field of each activity definition. | | |
| | fallbackActivity | `function` | Determines which activity to navigate to if there is no matching URL when first entering. Typically, you create a 404 page and assign it here. | |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/pages/docs/advanced/history-sync.en.mdx` around lines 62 - 68, Update
the APITable for historySyncPlugin to document all supported options: mark
fallbackActivity as required; replace the single "config" row with a required
"config or routes" entry (explain that routes is a legacy alternative to
config); and add rows for optional useHash, history, and urlPatternOptions
(briefly indicate their purposes). Ensure the table uses the exact option names
historySyncPlugin, fallbackActivity, config, routes, useHash, history, and
urlPatternOptions so readers can map them to the API.
| import { useLoaderData, type ActivityComponentType } from "@stackflow/react"; | ||
| import type { homeActivityLoader } from "./HomeActivity.loader"; | ||
|
|
||
| useEffect(() => { | ||
| // `MyActivity` 컴포넌트를 렌더링할 때 `Article` 컴포넌트가 필요로하는 데이터를 가져와요. | ||
| preload("Article", { | ||
| /* ... */ | ||
| }); | ||
| }, []); | ||
| const HomeActivity: ActivityComponentType<"HomeActivity"> = () => { | ||
| const loaderData = useLoaderData<typeof homeActivityLoader>(); |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In TypeScript, is import type { homeActivityLoader } from "./HomeActivity.loader"valid when used asuseLoaderData()? If not, what is the correct import pattern?
💡 Result:
No. import type { homeActivityLoader } ... makes homeActivityLoader type-only, and a typeof homeActivityLoader type query requires a value symbol—so TypeScript will error that it “cannot be used as a value” when referenced that way. Type-only imports are erased and can’t be used in value positions. [1]
Correct patterns
1) Import it as a value (simplest)
import { homeActivityLoader } from "./HomeActivity.loader";
const data = useLoaderData<typeof homeActivityLoader>();2) Keep it type-only (no runtime import) using typeof import(...)
type HomeActivityLoader = typeof import("./HomeActivity.loader").homeActivityLoader;
const data = useLoaderData<HomeActivityLoader>();TypeScript explicitly supports import("...") in type positions to access an export’s type without importing the value at runtime. [2]
(For context, Remix’s docs show the useLoaderData<typeof loader>() pattern when loader is available as a value symbol.) [3]
Sources: [1] TypeScript 3.8 release notes (type-only imports) [2] TypeScript 2.9 release notes (import("mod") in type positions) [3] Remix useLoaderData docs
🏁 Script executed:
cat -n "docs/pages/docs/advanced/preloading.ko.mdx" | sed -n '35,45p'Repository: daangn/stackflow
Length of output: 513
import type와 typeof 조합이 TypeScript에서 컴파일 오류를 발생시킵니다.
Line 40의 import type { homeActivityLoader }는 타입 전용 임포트로, 런타임에 지워집니다. Line 43의 typeof homeActivityLoader는 값 심볼이 필요한데, 타입 전용 임포트는 값 위치에서 사용할 수 없어 TypeScript 오류가 발생합니다. 일반 import로 변경해야 합니다.
Suggested fix
import { useLoaderData, type ActivityComponentType } from "@stackflow/react";
-import type { homeActivityLoader } from "./HomeActivity.loader";
+import { homeActivityLoader } from "./HomeActivity.loader";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { useLoaderData, type ActivityComponentType } from "@stackflow/react"; | |
| import type { homeActivityLoader } from "./HomeActivity.loader"; | |
| useEffect(() => { | |
| // `MyActivity` 컴포넌트를 렌더링할 때 `Article` 컴포넌트가 필요로하는 데이터를 가져와요. | |
| preload("Article", { | |
| /* ... */ | |
| }); | |
| }, []); | |
| const HomeActivity: ActivityComponentType<"HomeActivity"> = () => { | |
| const loaderData = useLoaderData<typeof homeActivityLoader>(); | |
| import { useLoaderData, type ActivityComponentType } from "@stackflow/react"; | |
| import { homeActivityLoader } from "./HomeActivity.loader"; | |
| const HomeActivity: ActivityComponentType<"HomeActivity"> = () => { | |
| const loaderData = useLoaderData<typeof homeActivityLoader>(); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/pages/docs/advanced/preloading.ko.mdx` around lines 39 - 43, The file
uses a type-only import for homeActivityLoader but also references typeof
homeActivityLoader at runtime, which causes a TS compile error; replace the
type-only import "import type { homeActivityLoader }" with a normal import (so
the value symbol exists at runtime) so the call useLoaderData<typeof
homeActivityLoader>() compiles; update the import statement that brings in
homeActivityLoader accordingly.
| In Stackflow 2.0, `useFlow()` and `useStepFlow()` are imported directly from `@stackflow/react`, so circular reference issues no longer occur in most cases. | ||
|
|
||
| The `useFlow()` function returned by the `stackflow()` function utilizes the declared activity types. Therefore, `useFlow()` and activity components interlock, causing a circular dependency. By using the `useActions()` hook and importing the types separately, you can eliminate this circular dependency. | ||
| If you are building a custom wrapper around `useActions()` and need to reference activity types, you can export the type from your stackflow setup: |
There was a problem hiding this comment.
Text and example are inconsistent on the type-export approach.
Line 7 says to export activity types from setup, but the updated sample demonstrates passing config directly to useActions() with no exported type alias.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/pages/docs/advanced/resolving-circular-reference.en.mdx` at line 7, The
prose and example diverge: the sentence claims you should export activity types
from your stackflow setup but the example instead shows passing config directly
to useActions(). Either update the text to say you can pass the stackflow config
directly to useActions() (and remove mention of exporting a type), or change the
example to export a named type alias (e.g., ActivityTypes) from your stackflow
setup and then use that alias with useActions<ActivityTypes>(); update wherever
useActions(), config, and the exported alias are referenced so the wording and
code match.
| } | ||
| ``` | ||
|
|
||
| 액티비티는 `ActivityComponentType`이라는 타입으로 선언되는 리액트 컴포넌트에요. |
There was a problem hiding this comment.
Korean orthography fixes needed in user-facing text.
Please adjust Line 35 and Line 100 for standard spelling/spacing (에요 → 예요, 않을거에요 → 않을 거예요).
Suggested text edits
-액티비티는 `ActivityComponentType`이라는 타입으로 선언되는 리액트 컴포넌트에요.
+액티비티는 `ActivityComponentType`이라는 타입으로 선언되는 리액트 컴포넌트예요.-...아무것도 렌더링되고 있지 않을거에요.
+...아무것도 렌더링되고 있지 않을 거예요.Also applies to: 100-100
🧰 Tools
🪛 LanguageTool
[grammar] ~35-~35: Ensure spelling is correct
Context: ...ActivityComponentType이라는 타입으로 선언되는 리액트 컴포넌트에요. ```tsx showLineNumbers filename="MyActivity.tsx" copy import type { ActivityComponentType } from "@stackflow/react"; import { AppScreen } from "@stackflow/plugin-basic-ui"; const MyActivity: ActivityComponentType<"MyActivity"> = () => { return ( <AppScreen appBar={{ title: "My Activity" }}> <div>My Activity</div> </AppScreen> ); }; export default MyActivity; ``` <Callout emoji="💡"> ActivityComponentType은 React.ComponentType와 호환돼요. 따라서 기존에 활용하시던 React.FC, React.Component등을 그대로 활용할 수 있어요. </Callout> <Callout emoji="💡"> **Stackflow**는 기본적으로 UI를 제공하지 않아요. 대신 @stackflow/plugin-basic-ui에서 기본 iOS(cupertino), Android(android) UI를 제공하고 있어요. </Callout> stackflow.config.ts에 액티비티를 등록하고 stackflow()`에 컴포넌트를 주입해요. ...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/pages/docs/get-started/activity.ko.mdx` at line 35, Fix Korean
orthography in the user-facing sentences by replacing "에요" with standard "예요" in
the sentence containing "액티비티는 `ActivityComponentType`이라는 타입으로 선언되는 리액트 컴포넌트에요."
and replace "않을거에요" with properly spaced and spelled "않을 거예요" where that phrase
appears (line ~100) so that both user-facing lines use standard spacing and
honorific spelling.
…e to @stackflow/react Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
FEP-2125: Deprecated 패키지 삭제 리뷰🚫 Blocker:
|
ENvironmentSet
left a comment
There was a problem hiding this comment.
Review: Demo 및 문서 업데이트 (FEP-2129)
Demo 앱 — ✅ PASS
@stackflow/react/future → @stackflow/react, @stackflow/link/future → @stackflow/link 마이그레이션 정상 완료. deprecated 패키지 3개 제거됨. const { Stack, actions } = stackflow(...) 패턴으로 소스코드와 일치.
문서 — 수정 필요 3건
🔴 1. stackflow() 반환값에 없는 useFlow destructuring
실제 StackflowOutput 타입 (integrations/react/src/stackflow.tsx:46-50):
export type StackflowOutput = {
Stack: StackComponentType;
actions: Actions;
stepActions: StepActions<ActivityBaseParams>;
};useFlow는 반환값에 포함되지 않습니다. @stackflow/react에서 독립 훅으로 export됩니다. Demo도 const { Stack, actions } 패턴을 올바르게 사용하고 있습니다.
수정 필요 파일:
| 파일 | 라인 |
|---|---|
docs/pages/docs/get-started/installation.en.mdx |
L40, L70 |
docs/pages/docs/get-started/installation.ko.mdx |
L40, L71 |
docs/pages/docs/get-started/activity.en.mdx |
L81 |
docs/pages/docs/get-started/activity.ko.mdx |
L84 |
docs/pages/docs/advanced/history-sync.en.mdx |
L43 |
docs/pages/docs/advanced/history-sync.ko.mdx |
L43 |
docs/pages/docs/migration-v2.en.mdx |
L52 ("After" 섹션) |
docs/pages/docs/migration-v2.ko.mdx |
L52 ("변경 후" 섹션) |
수정안: const { Stack } = stackflow(...) 로 변경 + useFlow 별도 import 안내.
🔴 2. useActions — 존재하지 않는 API 참조
파일: docs/pages/docs/advanced/resolving-circular-reference.en.mdx (L22-27), .ko.mdx (L22-27)
import { useActions } from "@stackflow/react";
export const useMyFlow = () => {
return useActions(config);
};useActions는 @stackflow/react exports에 존재하지 않습니다.
🔴 3. navigating-activities v1 타입 패턴 잔존
파일: docs/pages/docs/get-started/navigating-activities.en.mdx (L141-145), .ko.mdx (L143-147)
type ArticleParams = { title: string; };
const Article: ActivityComponentType<ArticleParams> = ({ params }) => {v2 ActivityComponentType은 string literal만 수용합니다. module augmentation + ActivityComponentType<"Article"> 패턴으로 변경 필요.
💡 제안: 과거 버전 API 문서 열람 지원v1 → v2 마이그레이션으로 기존 문서가 삭제/교체되고 있는데, 아직 v1을 사용 중인 사용자가 과거 API 문서를 참조할 방법이 없습니다. React Router처럼 버전별 문서를 열람할 수 있는 구조를 지원하면 좋겠습니다. 예를 들어:
마이그레이션이 완료되지 않은 사용자가 v1 레퍼런스를 찾을 수 있게 해주면 전환 부담이 줄어들 것으로 보입니다. |
추가 리뷰 (FEP-2129) — 신규 이슈 2건🔴 4.
|
| 파일 | 라인 | 현재 |
|---|---|---|
docs/pages/docs/advanced/loader-api.en.mdx |
L6 | import { ActivityLoaderArgs, useLoaderData } from "@stackflow/react" |
docs/pages/docs/advanced/loader-api.ko.mdx |
L6 | 동일 |
docs/pages/docs/advanced/preloading.en.mdx |
L12 | 동일 패턴 |
docs/pages/docs/advanced/preloading.ko.mdx |
L12 | 동일 패턴 |
수정안:
import type { ActivityLoaderArgs } from "@stackflow/config";
import { useLoaderData } from "@stackflow/react";🟡 5. @stackflow/link API 레퍼런스 부정확 (2건)
5-a. animate 기본값 설명 오류
문서 (link.en.mdx:45, link.ko.mdx:45):
"If not provided, it defaults to no animation."
실제 소스 (extensions/link/src/Link.tsx:89-99):
typeof props.animate === "undefined" || props.animate === null
? {} // 빈 옵션 → push/replace의 기본 동작(애니메이션 ON)
: { animate: props.animate }animate를 생략하면 빈 옵션 {}가 전달되어 기본 애니메이션이 적용됩니다.
5-b. 존재하지 않는 urlPatternOptions prop
문서 (link.en.mdx:47, link.ko.mdx:47)에서 urlPatternOptions를 LinkProps의 prop으로 문서화하고 있지만, 실제 LinkProps 인터페이스 (Link.tsx:24-31)에 해당 prop이 없습니다:
export interface LinkProps<K extends RegisteredActivityName> extends AnchorProps {
ref?: React.RefObject<HTMLAnchorElement>;
activityName: K;
activityParams: InferActivityParams<K>;
animate?: boolean;
replace?: boolean;
}urlPatternOptions는 config.historySync에서 내부적으로 사용될 뿐 사용자 prop이 아닙니다.
추가 리뷰 피드백 (FEP-2129)문서 수정/삭제6.
|
| 섹션 | 현재 | 수정 | 이유 |
|---|---|---|---|
Loading State (Article.tsx) |
{3,7} |
{2,6} |
빈 줄, 닫는 괄호 대신 import와 loading: 줄 |
Layout (Article.tsx) |
{3,4,8,9} |
{2,7} |
import와 layout: 줄 |
With Loader API (stackflow.config.ts) |
{8} |
{2,9} |
route가 아닌 import articleLoader와 loader: 줄 |
migration-v2 문서 개선
13. 5단계 "Before" 예시 확장
현재:
import { useFlow } from "./stackflow";./stackflow라는 파일 경로가 묵시적이라 이해가 어렵습니다. stackflow() 팩토리에서 useFlow를 destructuring하여 export하는 전체 맥락을 보여주도록 확장.
14. API 대응표에서 ./stackflow → stackflow() 팩토리로 지칭
현재:
| `useFlow()` from `./stackflow` | `useFlow()` from `@stackflow/react` |
파일 경로 대신 stackflow() 팩토리라는 표현으로 변경.
기타 수정
15. write-plugin.ko.mdx:262 오타
G현재 스택의 상태를 가져올 수 있어요 → 현재 스택의 상태를 가져올 수 있어요
16. write-plugin 문서 — 존재하지 않는 lifecycle hook
initialPushedEvent라는 lifecycle hook은 없습니다. 올바른 이름은 overrideInitialEvents입니다.
write-plugin.en.mdx:261, 272write-plugin.ko.mdx:269, 280
17. Link ref 타입 오류
문서에서 React.ForwardedRef<HTMLAnchorElement>로 기재되어 있지만, 실제 LinkProps는 React.RefObject<HTMLAnchorElement>입니다.
link.en.mdx:48,link.ko.mdx:48
ENvironmentSet
left a comment
There was a problem hiding this comment.
Changeset 리뷰 (FEP-2130)
1. Changeset 파일 분리 필요
현재 nine-rabbits-jam.md 하나에 4개 패키지(@stackflow/react, @stackflow/link, @stackflow/config, @stackflow/core)가 묶여 있습니다. Changesets는 frontmatter에 나열된 모든 패키지에 동일한 전체 본문을 넣기 때문에, 이대로 릴리스하면:
@stackflow/core의 CHANGELOG에@stackflow/reactbreaking changes 전체가 포함됨@stackflow/link의 CHANGELOG에도@stackflow/react내용이 포함됨
패키지별로 적절한 changelog가 생성되도록 changeset 파일을 분리해야 합니다. 예:
@stackflow/react: major— react 관련 본문@stackflow/link: major— link 관련 본문@stackflow/config: major+@stackflow/core: major— "Major version bump for ecosystem alignment"
2. 하위 플러그인 패키지 changeset 누락
plugin-basic-ui, plugin-blocker, plugin-history-sync, plugin-lifecycle가 이 PR에서 @stackflow/react의 import을 변경(useActions → useFlow, @stackflow/react/future → @stackflow/react 등)하고 있으나 changeset에 포함되어 있지 않습니다.
또한 이 패키지들의 peer dependency가 모두 @stackflow/react: ^1.x로 선언되어 있어, @stackflow/react v2 릴리스 시 peer dep이 만족되지 않습니다. 최소 patch bump과 함께 peer dep 범위를 업데이트해야 합니다.
3. @stackflow/compat-await-push 삭제 안내 오류
changeset 본문의 "Removed packages" 섹션에 @stackflow/compat-await-push가 포함되어 있으나, 이 패키지는 삭제 계획이 없는 것으로 확인됩니다. 해당 항목을 제거해야 합니다.
ENvironmentSet
left a comment
There was a problem hiding this comment.
Changeset 누락된 Breaking Changes (FEP-2130 추가)
기존 stable API 대비 changeset에 기록되지 않은 breaking changes입니다.
@stackflow/react
-
useActiveEffect,useEnterDoneEffect,useStep훅 제거 — 기존 stable export에 포함되어 있었으나 새 기본 export에서 사라졌습니다. -
stackflow()반환값에서activities필드 제거 — 기존에는stackflow().activities로 등록된 활동 목록에 접근 가능했습니다. -
stackflow().actions에서getStack(),dispatchEvent()제거 — 기존actions는getStack,dispatchEvent,push,pop,replace,stepPush,stepReplace,stepPop을 모두 포함했으나, 새Actions타입은push,replace,pop만 노출합니다. -
step actions가 별도
stepActions객체로 분리 — changeset은 이름 변경(stepPush→pushStep)만 언급하고 있으나, 구조적으로stackflow().actions.stepPush→stackflow().stepActions.pushStep으로 접근 경로가 변경되었습니다.
@stackflow/link
-
LinkProps.urlPatternOptionsprop 제거 — 기존 stable Link에서 제공하던 prop이 새 Link에서 사라졌습니다. -
Link가forwardRef를 사용하지 않음 — ref 타입이React.ForwardedRef<HTMLAnchorElement>에서React.RefObject<HTMLAnchorElement>로 변경되었습니다.
ENvironmentSet
left a comment
There was a problem hiding this comment.
Changeset 누락된 Breaking Changes 추가 (FEP-2130)
@stackflow/react
-
useActivityParams제네릭 인터페이스 변경 — 기존:useActivityParams<{ key: string | undefined }>()(params 객체 타입 직접 전달). 새 API:useActivityParams<"ActivityName">()(activity 이름 문자열 리터럴 전달,@stackflow/configRegister에서 타입 추론). 호출부가 모두 변경되어야 합니다. -
ActivityComponentType제네릭 인터페이스 변경 — 기존:ActivityComponentType<{ title: string }>(params 객체 타입 직접 전달, 내부적으로MonolithicActivityComponentType의 alias). 새 API:ActivityComponentType<"ArticleActivity">(activity 이름 문자열 리터럴 전달). 기존 params 객체 타입 기반 API는ActivityComponentTypeByParams로 이름이 변경되었습니다. -
stackflow()입출력 타입 모두 변경 — changeset은 입력 시그니처 변경만 언급하고 있습니다.- 입력:
StackflowOptions<T extends BaseActivities>→StackflowInput<T, R>({ activities, transitionDuration }→{ config, components }) - 출력:
StackflowOutput<T>→StackflowOutput(제네릭 파라미터 제거,activities/useFlow/useStepFlow/addActivity/addPlugin필드 제거,stepActions필드 추가)
- 입력:
Summary
.tech-specs/future-to-stable-migration.md).tech-specs/tasks/01~07)@stackflow/react,@stackflow/linkAPI 승격,compat-await-push/plugin-preload/plugin-map-initial-activity삭제,__internal__제거, 데모/문서 업데이트, changeset/릴리스Test plan
🤖 Generated with Claude Code