Skip to content

Commit 2e80a5d

Browse files
orionmizclaude
andauthored
docs: add project memory documentation for agents (#612)
Co-authored-by: Claude <[email protected]>
1 parent 461b422 commit 2e80a5d

File tree

3 files changed

+245
-0
lines changed

3 files changed

+245
-0
lines changed

.github/workflows/opencode.yml

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
name: opencode
2+
3+
on:
4+
issue_comment:
5+
types: [created]
6+
7+
jobs:
8+
opencode:
9+
if: |
10+
contains(github.event.comment.body, ' /oc') ||
11+
startsWith(github.event.comment.body, '/oc') ||
12+
contains(github.event.comment.body, ' /opencode') ||
13+
startsWith(github.event.comment.body, '/opencode')
14+
runs-on: ubuntu-latest
15+
environment: Maintainer Only
16+
permissions:
17+
contents: read
18+
id-token: write
19+
steps:
20+
- name: Checkout repository
21+
uses: actions/checkout@v4
22+
23+
- name: Run opencode
24+
uses: sst/opencode/github@latest
25+
env:
26+
ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
27+
with:
28+
model: anthropic/claude-sonnet-4-20250514

AGENTS.md

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
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

CLAUDE.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
AGENTS.md

0 commit comments

Comments
 (0)