Skip to content

[FEATURE] Complete API documentation for all exported items with comprehensive examples#9

Merged
vothanhdat merged 7 commits intomasterfrom
copilot/fix-8
Aug 9, 2025
Merged

[FEATURE] Complete API documentation for all exported items with comprehensive examples#9
vothanhdat merged 7 commits intomasterfrom
copilot/fix-8

Conversation

Copy link
Contributor

Copilot AI commented Aug 8, 2025

This PR provides comprehensive documentation for all exported items from index.ts as requested in the feature request. The documentation has been created on the doc branch and includes detailed API references, usage patterns, and practical examples.

📚 Documentation Added

API_DOCUMENTATION.md

A comprehensive 19,000+ character API reference covering all 15 exported items:

  • Core Context System: Context class, getContext, useDataContext
  • Data Source Hooks: useDataSource, useDataSourceMultiple
  • Data Subscription Hooks: useDataSubscribe, useDataSubscribeMultiple, useDataSubscribeMultipleWithDebounce, useDataSubscribeWithTransform
  • Root Context Factory: createRootCtx
  • Auto Context System: AutoRootCtx, createAutoCtx
  • Utility Hooks: useArrayHash, useQuickSubscribe

DOC_README.md

A documentation index providing:

  • Quick start guide
  • Library overview
  • Key features and benefits
  • Common use cases
  • Basic quick example
  • Additional comprehensive examples for createRootCtx, useDataSubscribeMultiple, and useQuickSubscribe

✨ Documentation Features

Each API item includes:

  • Type definitions with full TypeScript signatures
  • Parameter descriptions with types and purposes
  • Return value documentation
  • Practical code examples showing real-world usage
  • Usage patterns demonstrating best practices

🎯 Complete Example Applications

The documentation includes multiple practical examples:

Basic State Management:

// Simple context usage with useDataContext, useDataSource, useDataSubscribe
function UserProfile() {
  const ctx = useDataContext<AppState>('app-state');
  const user = useDataSubscribe(ctx, 'user');
  return <div>Hello, {user?.name}</div>;
}

Advanced State Management with createRootCtx:

// Factory pattern for complex state management
const { Root: UserRoot, useCtxState } = createRootCtx('user-state', useUserState);
function UserProfile({ userId }) {
  const ctx = useCtxState({ userId });
  const { user, loading, error } = useDataSubscribeMultiple(ctx, 'user', 'loading', 'error');
  // ...
}

Simplified Property Access with useQuickSubscribe:

// Automatic subscription to accessed properties
function SettingsPanel() {
  const { theme, language, updateSetting } = useQuickSubscribe(ctx);
  // Only subscribes to properties you actually use
}

📖 Structure

The documentation is organized with a comprehensive table of contents and follows a logical progression from basic concepts to advanced patterns, making it accessible for both beginners and experienced developers.

Fixes #8.


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI and others added 2 commits August 8, 2025 15:46
Co-authored-by: vothanhdat <8221386+vothanhdat@users.noreply.github.com>
…erns

Co-authored-by: vothanhdat <8221386+vothanhdat@users.noreply.github.com>
Copilot AI changed the title [WIP] [FEATURE] Documentary [FEATURE] Complete API documentation for all exported items Aug 8, 2025
Copilot AI requested a review from vothanhdat August 8, 2025 15:50
Comment on lines 501 to 511
function App() {
return (
<AutoRootCtx Wrapper={ErrorBoundary}>
<Router>
<Routes>
<Route path="/user/:id" element={<UserPage />} />
</Routes>
</Router>
</AutoRootCtx>
);
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot it should be like this

function App() {
return <>



<Route path="/user/:id" element={} />


</>;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated the App component example to use React Fragment syntax as requested (commit 00768cd).

Co-authored-by: vothanhdat <8221386+vothanhdat@users.noreply.github.com>
Comment on lines 499 to 518
```typescript
// At your app root
function App() {
return <>
<AutoRootCtx Wrapper={ErrorBoundary}>
<Router>
<Routes>
<Route path="/user/:id" element={<UserPage />} />
</Routes>
</Router>
</AutoRootCtx>
</>;
}

// ErrorBoundary wrapper
function ErrorBoundary({ children }: { children: React.ReactNode }) {
// Your error boundary logic
return <>{children}</>;
}
```
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot

Suggested change
```typescript
// At your app root
function App() {
return <>
<AutoRootCtx Wrapper={ErrorBoundary}>
<Router>
<Routes>
<Route path="/user/:id" element={<UserPage />} />
</Routes>
</Router>
</AutoRootCtx>
</>;
}
// ErrorBoundary wrapper
function ErrorBoundary({ children }: { children: React.ReactNode }) {
// Your error boundary logic
return <>{children}</>;
}
```
```typescript
// At your app root
function App() {
return (
<>
<AutoRootCtx Wrapper={ErrorBoundary}/>
<Router>
<Routes>
<Route path="/user/:id" element={<UserPage />} />
</Routes>
</Router>
</>
);
}
// ErrorBoundary wrapper
function ErrorBoundary({ children }: { children: React.ReactNode }) {
// Your error boundary logic
return <>{children}</>;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated the AutoRootCtx example to use self-closing tag and proper structure as suggested (commit cbb7e32).

Co-authored-by: vothanhdat <8221386+vothanhdat@users.noreply.github.com>
Copilot AI requested a review from vothanhdat August 9, 2025 00:10
Repository owner deleted a comment from Copilot AI Aug 9, 2025
…and useQuickSubscribe

Co-authored-by: vothanhdat <8221386+vothanhdat@users.noreply.github.com>
Copilot AI changed the title [FEATURE] Complete API documentation for all exported items [FEATURE] Complete API documentation for all exported items with comprehensive examples Aug 9, 2025
Copy link
Owner

@vothanhdat vothanhdat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot yarn.lock and package-lock.json should not be modify/added. can you discard those change.

Co-authored-by: vothanhdat <8221386+vothanhdat@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Aug 9, 2025

@copilot yarn.lock and package-lock.json should not be modify/added. can you discard those change.

Removed package-lock.json and restored yarn.lock to its original state. These lock files should not have been modified during the documentation work (commit 3f56019).

Copilot AI requested a review from vothanhdat August 9, 2025 00:42
@vothanhdat vothanhdat marked this pull request as ready for review August 9, 2025 00:44
@vothanhdat vothanhdat merged commit 4f4617e into master Aug 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Documentary

2 participants