|
| 1 | +# Stackflow Project Memory |
| 2 | + |
| 3 | +## Project Overview |
| 4 | + |
| 5 | +Stackflow is a JavaScript library that implements Stack Navigation UX commonly used in mobile applications (iOS/Android). It provides a framework-agnostic core with React integration for building hybrid apps and webviews with native-like navigation experiences. |
| 6 | + |
| 7 | +**Key Features:** |
| 8 | +- Stack-based navigation with state preservation |
| 9 | +- Native-like transition effects and iOS-style swipe back |
| 10 | +- Plugin system for extensibility |
| 11 | +- Framework agnostic core (currently React integration available) |
| 12 | +- Server-Side Rendering support |
| 13 | +- TypeScript support with strict typing |
| 14 | + |
| 15 | +## Architecture |
| 16 | + |
| 17 | +### Core Components |
| 18 | + |
| 19 | +1. **@stackflow/core** (`/core`) |
| 20 | + - Event-driven architecture using domain events |
| 21 | + - Stack state management |
| 22 | + - Plugin system interface |
| 23 | + - Effect system for side effects |
| 24 | + - Transition state management |
| 25 | + |
| 26 | +2. **@stackflow/react** (`/integrations/react`) |
| 27 | + - React integration layer |
| 28 | + - Provides `stackflow()` factory function |
| 29 | + - `<Stack />` component and `useFlow()` hooks |
| 30 | + - Activity component management |
| 31 | + |
| 32 | +3. **@stackflow/plugin-basic-ui** (`/extensions/plugin-basic-ui`) |
| 33 | + - Pre-built UI components for navigation |
| 34 | + - AppScreen component with app bar |
| 35 | + - Native-like themes (iOS Cupertino, Android Material) |
| 36 | + - Back button and close button components |
| 37 | + - Activity transition animations |
| 38 | + |
| 39 | +### Key Concepts |
| 40 | + |
| 41 | +- **Activity**: A screen/page in the navigation stack |
| 42 | +- **Stack**: Collection of activities with transition states |
| 43 | +- **Event**: Domain events that drive state changes (Pushed, Popped, Replaced, etc.) |
| 44 | +- **Plugin**: Extensions that can hook into lifecycle events |
| 45 | +- **Effect**: Side effects produced by state changes |
| 46 | +- **Step**: Sub-navigation within an activity |
| 47 | + |
| 48 | +## Project Structure |
| 49 | + |
| 50 | +```text |
| 51 | +/ |
| 52 | +├── core/ # Core library |
| 53 | +├── integrations/ # Framework integrations |
| 54 | +│ └── react/ # React integration |
| 55 | +├── extensions/ # Official plugins and extensions |
| 56 | +│ ├── link/ # Link component |
| 57 | +│ ├── plugin-basic-ui/ # Basic UI components |
| 58 | +│ ├── plugin-devtools/ # Development tools |
| 59 | +│ ├── plugin-history-sync/ # Browser history sync |
| 60 | +│ └── ... |
| 61 | +├── demo/ # Demo application |
| 62 | +├── docs/ # Documentation site (Next.js) |
| 63 | +└── config/ # Configuration package |
| 64 | +``` |
| 65 | + |
| 66 | +## Development Commands |
| 67 | + |
| 68 | +```bash |
| 69 | +# Install dependencies |
| 70 | +yarn install |
| 71 | + |
| 72 | +# Development mode (watch and build all packages) |
| 73 | +yarn dev |
| 74 | + |
| 75 | +# Build all packages |
| 76 | +yarn build |
| 77 | + |
| 78 | +# Run tests |
| 79 | +yarn test |
| 80 | + |
| 81 | +# Type checking |
| 82 | +yarn typecheck |
| 83 | + |
| 84 | +# Format code |
| 85 | +yarn format |
| 86 | + |
| 87 | +# Lint code |
| 88 | +yarn lint |
| 89 | + |
| 90 | +# Release process |
| 91 | +yarn release |
| 92 | + |
| 93 | +# Canary release |
| 94 | +yarn release:canary |
| 95 | +``` |
| 96 | + |
| 97 | +## Testing |
| 98 | + |
| 99 | +- Test files: `*.spec.ts` pattern |
| 100 | +- Run tests: `yarn test` |
| 101 | +- Tests are located alongside source files |
| 102 | + |
| 103 | +## Key Dependencies |
| 104 | + |
| 105 | +- **React**: >=16.8.0 (peer dependency) |
| 106 | +- **TypeScript**: ^5.5.3 |
| 107 | +- **Biome**: Code formatting and linting |
| 108 | +- **Ultra Runner**: Monorepo task runner |
| 109 | +- **Changesets**: Version management and publishing |
| 110 | + |
| 111 | +## Plugin System |
| 112 | + |
| 113 | +Plugins can hook into various lifecycle events: |
| 114 | +- `onInit` |
| 115 | +- `onBeforePush/onPushed` |
| 116 | +- `onBeforePop/onPopped` |
| 117 | +- `onBeforeReplace/onReplaced` |
| 118 | +- `onBeforeStepPush/onStepPushed` |
| 119 | +- `onBeforeStepPop/onStepPopped` |
| 120 | +- `onBeforeStepReplace/onStepReplaced` |
| 121 | +- `onChanged` (catch-all) |
| 122 | + |
| 123 | +## Important Patterns |
| 124 | + |
| 125 | +1. **Event Sourcing**: All state changes are driven by events |
| 126 | +2. **Immutable State**: Stack state is immutable and updated via reducers |
| 127 | +3. **Effect System**: Side effects are separated from state updates |
| 128 | +4. **Plugin Architecture**: Extensible through plugin hooks |
| 129 | +5. **Type Safety**: Extensive TypeScript types for activities and parameters |
| 130 | + |
| 131 | +## Common Tasks |
| 132 | + |
| 133 | +### Adding a New Activity |
| 134 | +```typescript |
| 135 | +export const { Stack, useFlow } = stackflow({ |
| 136 | + transitionDuration: 350, |
| 137 | + plugins: [ |
| 138 | + basicRendererPlugin(), |
| 139 | + basicUIPlugin({ |
| 140 | + theme: "cupertino", |
| 141 | + }), |
| 142 | + ], |
| 143 | + activities: { |
| 144 | + MyActivity, |
| 145 | + }, |
| 146 | +}); |
| 147 | +``` |
| 148 | + |
| 149 | +### Navigation |
| 150 | +```tsx |
| 151 | +const MyActivity: ActivityComponentType = () => { |
| 152 | + const { push } = useFlow(); |
| 153 | + |
| 154 | + const onClick = () => { |
| 155 | + push("Article", { |
| 156 | + title: "Hello", |
| 157 | + }); |
| 158 | + }; |
| 159 | + |
| 160 | + return ( |
| 161 | + <AppScreen appBar={{ title: "My Activity" }}> |
| 162 | + <div> |
| 163 | + My Activity |
| 164 | + <button onClick={onClick}>Go to article page</button> |
| 165 | + </div> |
| 166 | + </AppScreen> |
| 167 | + ); |
| 168 | +}; |
| 169 | +``` |
| 170 | + |
| 171 | +### Creating a Plugin |
| 172 | +```tsx |
| 173 | +stackflow({ |
| 174 | + // ... |
| 175 | + plugins: [ |
| 176 | + () => { |
| 177 | + return { |
| 178 | + key: "my-plugin", |
| 179 | + onPushed(actions, effect) { |
| 180 | + // actions.getStack() |
| 181 | + // actions.dispatchEvent(...) |
| 182 | + console.log("Pushed!"); |
| 183 | + console.log("Effect:", effect); |
| 184 | + }, |
| 185 | + }; |
| 186 | + }, |
| 187 | + ], |
| 188 | +}); |
| 189 | +``` |
| 190 | + |
| 191 | +## Future API (Stackflow 2.0 Preview) |
| 192 | + |
| 193 | +The Future API (`@stackflow/react/future`) is a preview of Stackflow 2.0 that optimizes initial loading performance through better separation of concerns. Key improvements: |
| 194 | + |
| 195 | +- **Config-first approach**: Activities and routes defined in `@stackflow/config` using `defineConfig()`, with React components injected separately |
| 196 | +- **Direct imports**: Hooks (`useFlow`, `useStepFlow`) and `<Link>` component imported directly without factory functions |
| 197 | +- **Loader API**: Built-in data loading without React dependencies for better performance |
| 198 | +- **API Pipelining**: Parallel loading of API data and React app initialization |
| 199 | +- **Enhanced type safety**: Types inferred from config rather than component props |
| 200 | + |
| 201 | +The Future API maintains compatibility with existing code while preparing for Stackflow 2.0. Routes are now declared in the config file alongside activities, and the plugin system has been streamlined to work with the centralized configuration. |
| 202 | + |
| 203 | +## Build System |
| 204 | + |
| 205 | +- Uses esbuild for JavaScript/TypeScript compilation |
| 206 | +- Separate builds for CommonJS and ESM |
| 207 | +- TypeScript declarations generated separately |
| 208 | +- Monorepo managed with Yarn workspaces and ultra runner |
| 209 | + |
| 210 | +## Important Notes |
| 211 | + |
| 212 | +- Always use `yarn` commands (not npm) |
| 213 | +- The project uses Yarn Berry (v4) |
| 214 | +- Changesets are used for versioning |
| 215 | +- Biome is used for formatting/linting (not ESLint/Prettier) |
| 216 | +- Documentation site is built with Next.js and deployed to Cloudflare |
0 commit comments