docs(clients): add README for client packages - #2683

Merged
ymc9 merged 1 commit into
devfrom
docs/clients-readme
May 26, 2026
Merged

docs(clients): add README for client packages#2683
ymc9 merged 1 commit into
devfrom
docs/clients-readme

Conversation

@ymc9

@ymc9ymc9 commented May 25, 2026

Copy link
Copy Markdown
Member

Summary

  • Add README.md for @zenstackhq/client-helpers, @zenstackhq/fetch-client, and @zenstackhq/tanstack-query so each package shows a description on npm.
  • Style matches the existing package READMEs (e.g. packages/orm, packages/server).

Test plan

  • Visual review of the three new README files

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Documentation
    • Added comprehensive documentation for client helper libraries covering installation, configuration, and usage examples.
    • Documented fetch-based and TanStack Query client integrations with code samples and framework support details.
    • Added guidance on shared building blocks for implementing custom clients.

Review Change Stack

Add README.md files for @zenstackhq/client-helpers, @zenstackhq/fetch-client,
and @zenstackhq/tanstack-query so the packages have a description on npm.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@claude

claudeBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

Claude finished @ymc9's task —— View job


PR Review: Client Package README Files

Reviewing the addition of README.md files for client packages.

Todo List:

  • Read the three new README.md files
  • Compare with existing README patterns in the repo
  • Analyze content quality and consistency
  • Check for accuracy and completeness
  • Provide comprehensive review feedback

Review Feedback

Overall, this is a well-executed PR that adds valuable documentation for the client packages. The README files follow good conventions and provide useful information for npm users. Here are my detailed findings:

Strengths

  1. Consistent Structure: All three READMEs follow a consistent pattern similar to existing packages (@zenstackhq/orm, @zenstackhq/server)
  2. Clear Descriptions: Each package has a concise, accurate description that matches their package.json descriptions
  3. Practical Examples: The fetch-client and tanstack-query READMEs include helpful code examples
  4. Documentation Links: All files include proper "Learn More" sections linking to relevant documentation

📝 Observations & Minor Suggestions

@zenstackhq/client-helpers (packages/clients/client-helpers/README.md:1-4):

  • ✅ Accurately describes this as shared building blocks for other clients
  • ✅ Good cross-references to fetch-client and tanstack-query packages
  • ⚠️Minor: This is quite minimal compared to others, but appropriate given it's primarily internal infrastructure

@zenstackhq/fetch-client (packages/clients/fetch-client/README.md:1-33):

  • ✅ Excellent code example showing both basic usage and transactions
  • ✅ Clear installation instructions
  • ✅ Good description highlighting it's "lightweight" and "type-safe"
  • ✅ Example imports and endpoint configuration are realistic

@zenstackhq/tanstack-query (packages/clients/tanstack-query/README.md:1-42):

  • ✅ Great overview of supported frameworks (React, Vue, Svelte)
  • ✅ Framework-specific installation example with peer dependencies
  • ✅ Practical React usage example showing hooks and mutations
  • ✅ Good note about replacing peer dependencies for different frameworks

🔍 Technical Accuracy

All code examples appear technically sound:

  • Import paths match the package exports in package.json
  • API usage aligns with ZenStack conventions
  • TanStack Query integration follows expected patterns
  • Documentation URLs are correct

📊 Consistency with Existing Patterns

The READMEs successfully match the style of existing packages:

  • Similar section ordering (description → installation → usage → learn more)
  • Consistent formatting and markdown usage
  • Appropriate level of detail for npm package pages
  • Proper cross-linking between related packages

🎯 Recommendations

  1. All good to go! These READMEs effectively serve their purpose of providing npm users with quick package understanding and usage examples.

  2. Consider for future: The client-helpers README could potentially benefit from a small usage example, but it's fine as-is since it's primarily for internal use.

Security & Best Practices

  • No security concerns
  • Examples follow ZenStack best practices
  • No hardcoded sensitive data or problematic patterns

Summary

This is a solid documentation improvement that will enhance the npm experience for users. The READMEs are well-written, accurate, and consistent with project conventions. Ready for merge

@coderabbitai

coderabbitaiBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 09c666a2-216f-4833-986b-33a099b487c7

📥 Commits

Reviewing files that changed from the base of the PR and between adb109b and cd86cdf.

📒 Files selected for processing (3)
  • packages/clients/client-helpers/README.md
  • packages/clients/fetch-client/README.md
  • packages/clients/tanstack-query/README.md

📝 Walkthrough

Walkthrough

This PR adds README documentation for three ZenStack client packages. It introduces client-helpers as the shared foundation, documents fetch-client as a lightweight type-safe fetch-based client with usage examples, and provides tanstack-query documentation covering frameworks and React hook integration.

Changes

Client Packages Documentation

Layer / File(s)Summary
Client package READMEs
packages/clients/client-helpers/README.md, packages/clients/fetch-client/README.md, packages/clients/tanstack-query/README.md
Added three READMEs documenting the client packages ecosystem: client-helpers describes shared building blocks for consuming ZenStack's CRUD service; fetch-client documents a lightweight fetch-based client with installation, createClient usage, CRUD operations, and $transaction examples; tanstack-query documents the TanStack Query integration with supported frameworks, setup instructions, and React hook usage examples.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A docs hop, a triple beat,
Three READMEs, clean and neat,
Clients helpers, fetch, and query too,
ZenStack's toolkit, shiny new!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe pull request title clearly and concisely summarizes the main change: adding README files for client packages.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/clients-readme

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ymc9
ymc9 merged commit a43dff5 into devMay 26, 2026
8 checks passed
@ymc9
ymc9 deleted the docs/clients-readme branch May 26, 2026 03:27
@coderabbitaicoderabbitaiBot mentioned this pull request May 26, 2026
Sign up for freeto 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.

1 participant

@ymc9
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

docs(clients): add README for client packages - #2683

Merged
ymc9 merged 1 commit into
devfrom
docs/clients-readme
May 26, 2026
Merged

docs(clients): add README for client packages#2683
ymc9 merged 1 commit into
devfrom
docs/clients-readme

Conversation

@ymc9

@ymc9ymc9 commented May 25, 2026

Copy link
Copy Markdown
Member

Summary

  • Add README.md for @zenstackhq/client-helpers, @zenstackhq/fetch-client, and @zenstackhq/tanstack-query so each package shows a description on npm.
  • Style matches the existing package READMEs (e.g. packages/orm, packages/server).

Test plan

  • Visual review of the three new README files

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Documentation
    • Added comprehensive documentation for client helper libraries covering installation, configuration, and usage examples.
    • Documented fetch-based and TanStack Query client integrations with code samples and framework support details.
    • Added guidance on shared building blocks for implementing custom clients.

Review Change Stack

Add README.md files for @zenstackhq/client-helpers, @zenstackhq/fetch-client,
and @zenstackhq/tanstack-query so the packages have a description on npm.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@claude

claudeBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

Claude finished @ymc9's task —— View job


PR Review: Client Package README Files

Reviewing the addition of README.md files for client packages.

Todo List:

  • Read the three new README.md files
  • Compare with existing README patterns in the repo
  • Analyze content quality and consistency
  • Check for accuracy and completeness
  • Provide comprehensive review feedback

Review Feedback

Overall, this is a well-executed PR that adds valuable documentation for the client packages. The README files follow good conventions and provide useful information for npm users. Here are my detailed findings:

Strengths

  1. Consistent Structure: All three READMEs follow a consistent pattern similar to existing packages (@zenstackhq/orm, @zenstackhq/server)
  2. Clear Descriptions: Each package has a concise, accurate description that matches their package.json descriptions
  3. Practical Examples: The fetch-client and tanstack-query READMEs include helpful code examples
  4. Documentation Links: All files include proper "Learn More" sections linking to relevant documentation

📝 Observations & Minor Suggestions

@zenstackhq/client-helpers (packages/clients/client-helpers/README.md:1-4):

  • ✅ Accurately describes this as shared building blocks for other clients
  • ✅ Good cross-references to fetch-client and tanstack-query packages
  • ⚠️Minor: This is quite minimal compared to others, but appropriate given it's primarily internal infrastructure

@zenstackhq/fetch-client (packages/clients/fetch-client/README.md:1-33):

  • ✅ Excellent code example showing both basic usage and transactions
  • ✅ Clear installation instructions
  • ✅ Good description highlighting it's "lightweight" and "type-safe"
  • ✅ Example imports and endpoint configuration are realistic

@zenstackhq/tanstack-query (packages/clients/tanstack-query/README.md:1-42):

  • ✅ Great overview of supported frameworks (React, Vue, Svelte)
  • ✅ Framework-specific installation example with peer dependencies
  • ✅ Practical React usage example showing hooks and mutations
  • ✅ Good note about replacing peer dependencies for different frameworks

🔍 Technical Accuracy

All code examples appear technically sound:

  • Import paths match the package exports in package.json
  • API usage aligns with ZenStack conventions
  • TanStack Query integration follows expected patterns
  • Documentation URLs are correct

📊 Consistency with Existing Patterns

The READMEs successfully match the style of existing packages:

  • Similar section ordering (description → installation → usage → learn more)
  • Consistent formatting and markdown usage
  • Appropriate level of detail for npm package pages
  • Proper cross-linking between related packages

🎯 Recommendations

  1. All good to go! These READMEs effectively serve their purpose of providing npm users with quick package understanding and usage examples.

  2. Consider for future: The client-helpers README could potentially benefit from a small usage example, but it's fine as-is since it's primarily for internal use.

Security & Best Practices

  • No security concerns
  • Examples follow ZenStack best practices
  • No hardcoded sensitive data or problematic patterns

Summary

This is a solid documentation improvement that will enhance the npm experience for users. The READMEs are well-written, accurate, and consistent with project conventions. Ready for merge

@coderabbitai

coderabbitaiBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 09c666a2-216f-4833-986b-33a099b487c7

📥 Commits

Reviewing files that changed from the base of the PR and between adb109b and cd86cdf.

📒 Files selected for processing (3)
  • packages/clients/client-helpers/README.md
  • packages/clients/fetch-client/README.md
  • packages/clients/tanstack-query/README.md

📝 Walkthrough

Walkthrough

This PR adds README documentation for three ZenStack client packages. It introduces client-helpers as the shared foundation, documents fetch-client as a lightweight type-safe fetch-based client with usage examples, and provides tanstack-query documentation covering frameworks and React hook integration.

Changes

Client Packages Documentation

Layer / File(s)Summary
Client package READMEs
packages/clients/client-helpers/README.md, packages/clients/fetch-client/README.md, packages/clients/tanstack-query/README.md
Added three READMEs documenting the client packages ecosystem: client-helpers describes shared building blocks for consuming ZenStack's CRUD service; fetch-client documents a lightweight fetch-based client with installation, createClient usage, CRUD operations, and $transaction examples; tanstack-query documents the TanStack Query integration with supported frameworks, setup instructions, and React hook usage examples.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A docs hop, a triple beat,
Three READMEs, clean and neat,
Clients helpers, fetch, and query too,
ZenStack's toolkit, shiny new!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe pull request title clearly and concisely summarizes the main change: adding README files for client packages.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/clients-readme

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ymc9
ymc9 merged commit a43dff5 into devMay 26, 2026
8 checks passed
@ymc9
ymc9 deleted the docs/clients-readme branch May 26, 2026 03:27
@coderabbitaicoderabbitaiBot mentioned this pull request May 26, 2026
Sign up for freeto 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.

1 participant

@ymc9
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

docs(clients): add README for client packages - #2683

Merged
ymc9 merged 1 commit into
devfrom
docs/clients-readme
May 26, 2026
Merged

docs(clients): add README for client packages#2683
ymc9 merged 1 commit into
devfrom
docs/clients-readme

Conversation

@ymc9

@ymc9ymc9 commented May 25, 2026

Copy link
Copy Markdown
Member

Summary

  • Add README.md for @zenstackhq/client-helpers, @zenstackhq/fetch-client, and @zenstackhq/tanstack-query so each package shows a description on npm.
  • Style matches the existing package READMEs (e.g. packages/orm, packages/server).

Test plan

  • Visual review of the three new README files

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Documentation
    • Added comprehensive documentation for client helper libraries covering installation, configuration, and usage examples.
    • Documented fetch-based and TanStack Query client integrations with code samples and framework support details.
    • Added guidance on shared building blocks for implementing custom clients.

Review Change Stack

Add README.md files for @zenstackhq/client-helpers, @zenstackhq/fetch-client,
and @zenstackhq/tanstack-query so the packages have a description on npm.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@claude

claudeBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

Claude finished @ymc9's task —— View job


PR Review: Client Package README Files

Reviewing the addition of README.md files for client packages.

Todo List:

  • Read the three new README.md files
  • Compare with existing README patterns in the repo
  • Analyze content quality and consistency
  • Check for accuracy and completeness
  • Provide comprehensive review feedback

Review Feedback

Overall, this is a well-executed PR that adds valuable documentation for the client packages. The README files follow good conventions and provide useful information for npm users. Here are my detailed findings:

Strengths

  1. Consistent Structure: All three READMEs follow a consistent pattern similar to existing packages (@zenstackhq/orm, @zenstackhq/server)
  2. Clear Descriptions: Each package has a concise, accurate description that matches their package.json descriptions
  3. Practical Examples: The fetch-client and tanstack-query READMEs include helpful code examples
  4. Documentation Links: All files include proper "Learn More" sections linking to relevant documentation

📝 Observations & Minor Suggestions

@zenstackhq/client-helpers (packages/clients/client-helpers/README.md:1-4):

  • ✅ Accurately describes this as shared building blocks for other clients
  • ✅ Good cross-references to fetch-client and tanstack-query packages
  • ⚠️Minor: This is quite minimal compared to others, but appropriate given it's primarily internal infrastructure

@zenstackhq/fetch-client (packages/clients/fetch-client/README.md:1-33):

  • ✅ Excellent code example showing both basic usage and transactions
  • ✅ Clear installation instructions
  • ✅ Good description highlighting it's "lightweight" and "type-safe"
  • ✅ Example imports and endpoint configuration are realistic

@zenstackhq/tanstack-query (packages/clients/tanstack-query/README.md:1-42):

  • ✅ Great overview of supported frameworks (React, Vue, Svelte)
  • ✅ Framework-specific installation example with peer dependencies
  • ✅ Practical React usage example showing hooks and mutations
  • ✅ Good note about replacing peer dependencies for different frameworks

🔍 Technical Accuracy

All code examples appear technically sound:

  • Import paths match the package exports in package.json
  • API usage aligns with ZenStack conventions
  • TanStack Query integration follows expected patterns
  • Documentation URLs are correct

📊 Consistency with Existing Patterns

The READMEs successfully match the style of existing packages:

  • Similar section ordering (description → installation → usage → learn more)
  • Consistent formatting and markdown usage
  • Appropriate level of detail for npm package pages
  • Proper cross-linking between related packages

🎯 Recommendations

  1. All good to go! These READMEs effectively serve their purpose of providing npm users with quick package understanding and usage examples.

  2. Consider for future: The client-helpers README could potentially benefit from a small usage example, but it's fine as-is since it's primarily for internal use.

Security & Best Practices

  • No security concerns
  • Examples follow ZenStack best practices
  • No hardcoded sensitive data or problematic patterns

Summary

This is a solid documentation improvement that will enhance the npm experience for users. The READMEs are well-written, accurate, and consistent with project conventions. Ready for merge

@coderabbitai

coderabbitaiBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 09c666a2-216f-4833-986b-33a099b487c7

📥 Commits

Reviewing files that changed from the base of the PR and between adb109b and cd86cdf.

📒 Files selected for processing (3)
  • packages/clients/client-helpers/README.md
  • packages/clients/fetch-client/README.md
  • packages/clients/tanstack-query/README.md

📝 Walkthrough

Walkthrough

This PR adds README documentation for three ZenStack client packages. It introduces client-helpers as the shared foundation, documents fetch-client as a lightweight type-safe fetch-based client with usage examples, and provides tanstack-query documentation covering frameworks and React hook integration.

Changes

Client Packages Documentation

Layer / File(s)Summary
Client package READMEs
packages/clients/client-helpers/README.md, packages/clients/fetch-client/README.md, packages/clients/tanstack-query/README.md
Added three READMEs documenting the client packages ecosystem: client-helpers describes shared building blocks for consuming ZenStack's CRUD service; fetch-client documents a lightweight fetch-based client with installation, createClient usage, CRUD operations, and $transaction examples; tanstack-query documents the TanStack Query integration with supported frameworks, setup instructions, and React hook usage examples.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A docs hop, a triple beat,
Three READMEs, clean and neat,
Clients helpers, fetch, and query too,
ZenStack's toolkit, shiny new!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe pull request title clearly and concisely summarizes the main change: adding README files for client packages.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/clients-readme

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ymc9
ymc9 merged commit a43dff5 into devMay 26, 2026
8 checks passed
@ymc9
ymc9 deleted the docs/clients-readme branch May 26, 2026 03:27
@coderabbitaicoderabbitaiBot mentioned this pull request May 26, 2026
Sign up for freeto 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.

1 participant

@ymc9
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

docs(clients): add README for client packages - #2683

Merged
ymc9 merged 1 commit into
devfrom
docs/clients-readme
May 26, 2026
Merged

docs(clients): add README for client packages#2683
ymc9 merged 1 commit into
devfrom
docs/clients-readme

Conversation

@ymc9

@ymc9ymc9 commented May 25, 2026

Copy link
Copy Markdown
Member

Summary

  • Add README.md for @zenstackhq/client-helpers, @zenstackhq/fetch-client, and @zenstackhq/tanstack-query so each package shows a description on npm.
  • Style matches the existing package READMEs (e.g. packages/orm, packages/server).

Test plan

  • Visual review of the three new README files

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Documentation
    • Added comprehensive documentation for client helper libraries covering installation, configuration, and usage examples.
    • Documented fetch-based and TanStack Query client integrations with code samples and framework support details.
    • Added guidance on shared building blocks for implementing custom clients.

Review Change Stack

Add README.md files for @zenstackhq/client-helpers, @zenstackhq/fetch-client,
and @zenstackhq/tanstack-query so the packages have a description on npm.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@claude

claudeBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

Claude finished @ymc9's task —— View job


PR Review: Client Package README Files

Reviewing the addition of README.md files for client packages.

Todo List:

  • Read the three new README.md files
  • Compare with existing README patterns in the repo
  • Analyze content quality and consistency
  • Check for accuracy and completeness
  • Provide comprehensive review feedback

Review Feedback

Overall, this is a well-executed PR that adds valuable documentation for the client packages. The README files follow good conventions and provide useful information for npm users. Here are my detailed findings:

Strengths

  1. Consistent Structure: All three READMEs follow a consistent pattern similar to existing packages (@zenstackhq/orm, @zenstackhq/server)
  2. Clear Descriptions: Each package has a concise, accurate description that matches their package.json descriptions
  3. Practical Examples: The fetch-client and tanstack-query READMEs include helpful code examples
  4. Documentation Links: All files include proper "Learn More" sections linking to relevant documentation

📝 Observations & Minor Suggestions

@zenstackhq/client-helpers (packages/clients/client-helpers/README.md:1-4):

  • ✅ Accurately describes this as shared building blocks for other clients
  • ✅ Good cross-references to fetch-client and tanstack-query packages
  • ⚠️Minor: This is quite minimal compared to others, but appropriate given it's primarily internal infrastructure

@zenstackhq/fetch-client (packages/clients/fetch-client/README.md:1-33):

  • ✅ Excellent code example showing both basic usage and transactions
  • ✅ Clear installation instructions
  • ✅ Good description highlighting it's "lightweight" and "type-safe"
  • ✅ Example imports and endpoint configuration are realistic

@zenstackhq/tanstack-query (packages/clients/tanstack-query/README.md:1-42):

  • ✅ Great overview of supported frameworks (React, Vue, Svelte)
  • ✅ Framework-specific installation example with peer dependencies
  • ✅ Practical React usage example showing hooks and mutations
  • ✅ Good note about replacing peer dependencies for different frameworks

🔍 Technical Accuracy

All code examples appear technically sound:

  • Import paths match the package exports in package.json
  • API usage aligns with ZenStack conventions
  • TanStack Query integration follows expected patterns
  • Documentation URLs are correct

📊 Consistency with Existing Patterns

The READMEs successfully match the style of existing packages:

  • Similar section ordering (description → installation → usage → learn more)
  • Consistent formatting and markdown usage
  • Appropriate level of detail for npm package pages
  • Proper cross-linking between related packages

🎯 Recommendations

  1. All good to go! These READMEs effectively serve their purpose of providing npm users with quick package understanding and usage examples.

  2. Consider for future: The client-helpers README could potentially benefit from a small usage example, but it's fine as-is since it's primarily for internal use.

Security & Best Practices

  • No security concerns
  • Examples follow ZenStack best practices
  • No hardcoded sensitive data or problematic patterns

Summary

This is a solid documentation improvement that will enhance the npm experience for users. The READMEs are well-written, accurate, and consistent with project conventions. Ready for merge

@coderabbitai

coderabbitaiBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 09c666a2-216f-4833-986b-33a099b487c7

📥 Commits

Reviewing files that changed from the base of the PR and between adb109b and cd86cdf.

📒 Files selected for processing (3)
  • packages/clients/client-helpers/README.md
  • packages/clients/fetch-client/README.md
  • packages/clients/tanstack-query/README.md

📝 Walkthrough

Walkthrough

This PR adds README documentation for three ZenStack client packages. It introduces client-helpers as the shared foundation, documents fetch-client as a lightweight type-safe fetch-based client with usage examples, and provides tanstack-query documentation covering frameworks and React hook integration.

Changes

Client Packages Documentation

Layer / File(s)Summary
Client package READMEs
packages/clients/client-helpers/README.md, packages/clients/fetch-client/README.md, packages/clients/tanstack-query/README.md
Added three READMEs documenting the client packages ecosystem: client-helpers describes shared building blocks for consuming ZenStack's CRUD service; fetch-client documents a lightweight fetch-based client with installation, createClient usage, CRUD operations, and $transaction examples; tanstack-query documents the TanStack Query integration with supported frameworks, setup instructions, and React hook usage examples.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A docs hop, a triple beat,
Three READMEs, clean and neat,
Clients helpers, fetch, and query too,
ZenStack's toolkit, shiny new!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe pull request title clearly and concisely summarizes the main change: adding README files for client packages.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/clients-readme

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ymc9
ymc9 merged commit a43dff5 into devMay 26, 2026
8 checks passed
@ymc9
ymc9 deleted the docs/clients-readme branch May 26, 2026 03:27
@coderabbitaicoderabbitaiBot mentioned this pull request May 26, 2026
Sign up for freeto 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.

1 participant

@ymc9
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

docs(clients): add README for client packages - #2683

Merged
ymc9 merged 1 commit into
devfrom
docs/clients-readme
May 26, 2026
Merged

docs(clients): add README for client packages#2683
ymc9 merged 1 commit into
devfrom
docs/clients-readme

Conversation

@ymc9

@ymc9ymc9 commented May 25, 2026

Copy link
Copy Markdown
Member

Summary

  • Add README.md for @zenstackhq/client-helpers, @zenstackhq/fetch-client, and @zenstackhq/tanstack-query so each package shows a description on npm.
  • Style matches the existing package READMEs (e.g. packages/orm, packages/server).

Test plan

  • Visual review of the three new README files

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Documentation
    • Added comprehensive documentation for client helper libraries covering installation, configuration, and usage examples.
    • Documented fetch-based and TanStack Query client integrations with code samples and framework support details.
    • Added guidance on shared building blocks for implementing custom clients.

Review Change Stack

Add README.md files for @zenstackhq/client-helpers, @zenstackhq/fetch-client,
and @zenstackhq/tanstack-query so the packages have a description on npm.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@claude

claudeBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

Claude finished @ymc9's task —— View job


PR Review: Client Package README Files

Reviewing the addition of README.md files for client packages.

Todo List:

  • Read the three new README.md files
  • Compare with existing README patterns in the repo
  • Analyze content quality and consistency
  • Check for accuracy and completeness
  • Provide comprehensive review feedback

Review Feedback

Overall, this is a well-executed PR that adds valuable documentation for the client packages. The README files follow good conventions and provide useful information for npm users. Here are my detailed findings:

Strengths

  1. Consistent Structure: All three READMEs follow a consistent pattern similar to existing packages (@zenstackhq/orm, @zenstackhq/server)
  2. Clear Descriptions: Each package has a concise, accurate description that matches their package.json descriptions
  3. Practical Examples: The fetch-client and tanstack-query READMEs include helpful code examples
  4. Documentation Links: All files include proper "Learn More" sections linking to relevant documentation

📝 Observations & Minor Suggestions

@zenstackhq/client-helpers (packages/clients/client-helpers/README.md:1-4):

  • ✅ Accurately describes this as shared building blocks for other clients
  • ✅ Good cross-references to fetch-client and tanstack-query packages
  • ⚠️Minor: This is quite minimal compared to others, but appropriate given it's primarily internal infrastructure

@zenstackhq/fetch-client (packages/clients/fetch-client/README.md:1-33):

  • ✅ Excellent code example showing both basic usage and transactions
  • ✅ Clear installation instructions
  • ✅ Good description highlighting it's "lightweight" and "type-safe"
  • ✅ Example imports and endpoint configuration are realistic

@zenstackhq/tanstack-query (packages/clients/tanstack-query/README.md:1-42):

  • ✅ Great overview of supported frameworks (React, Vue, Svelte)
  • ✅ Framework-specific installation example with peer dependencies
  • ✅ Practical React usage example showing hooks and mutations
  • ✅ Good note about replacing peer dependencies for different frameworks

🔍 Technical Accuracy

All code examples appear technically sound:

  • Import paths match the package exports in package.json
  • API usage aligns with ZenStack conventions
  • TanStack Query integration follows expected patterns
  • Documentation URLs are correct

📊 Consistency with Existing Patterns

The READMEs successfully match the style of existing packages:

  • Similar section ordering (description → installation → usage → learn more)
  • Consistent formatting and markdown usage
  • Appropriate level of detail for npm package pages
  • Proper cross-linking between related packages

🎯 Recommendations

  1. All good to go! These READMEs effectively serve their purpose of providing npm users with quick package understanding and usage examples.

  2. Consider for future: The client-helpers README could potentially benefit from a small usage example, but it's fine as-is since it's primarily for internal use.

Security & Best Practices

  • No security concerns
  • Examples follow ZenStack best practices
  • No hardcoded sensitive data or problematic patterns

Summary

This is a solid documentation improvement that will enhance the npm experience for users. The READMEs are well-written, accurate, and consistent with project conventions. Ready for merge

@coderabbitai

coderabbitaiBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 09c666a2-216f-4833-986b-33a099b487c7

📥 Commits

Reviewing files that changed from the base of the PR and between adb109b and cd86cdf.

📒 Files selected for processing (3)
  • packages/clients/client-helpers/README.md
  • packages/clients/fetch-client/README.md
  • packages/clients/tanstack-query/README.md

📝 Walkthrough

Walkthrough

This PR adds README documentation for three ZenStack client packages. It introduces client-helpers as the shared foundation, documents fetch-client as a lightweight type-safe fetch-based client with usage examples, and provides tanstack-query documentation covering frameworks and React hook integration.

Changes

Client Packages Documentation

Layer / File(s)Summary
Client package READMEs
packages/clients/client-helpers/README.md, packages/clients/fetch-client/README.md, packages/clients/tanstack-query/README.md
Added three READMEs documenting the client packages ecosystem: client-helpers describes shared building blocks for consuming ZenStack's CRUD service; fetch-client documents a lightweight fetch-based client with installation, createClient usage, CRUD operations, and $transaction examples; tanstack-query documents the TanStack Query integration with supported frameworks, setup instructions, and React hook usage examples.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A docs hop, a triple beat,
Three READMEs, clean and neat,
Clients helpers, fetch, and query too,
ZenStack's toolkit, shiny new!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe pull request title clearly and concisely summarizes the main change: adding README files for client packages.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/clients-readme

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ymc9
ymc9 merged commit a43dff5 into devMay 26, 2026
8 checks passed
@ymc9
ymc9 deleted the docs/clients-readme branch May 26, 2026 03:27
@coderabbitaicoderabbitaiBot mentioned this pull request May 26, 2026
Sign up for freeto 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.

1 participant

@ymc9
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

docs(clients): add README for client packages - #2683

Merged
ymc9 merged 1 commit into
devfrom
docs/clients-readme
May 26, 2026
Merged

docs(clients): add README for client packages#2683
ymc9 merged 1 commit into
devfrom
docs/clients-readme

Conversation

@ymc9

@ymc9ymc9 commented May 25, 2026

Copy link
Copy Markdown
Member

Summary

  • Add README.md for @zenstackhq/client-helpers, @zenstackhq/fetch-client, and @zenstackhq/tanstack-query so each package shows a description on npm.
  • Style matches the existing package READMEs (e.g. packages/orm, packages/server).

Test plan

  • Visual review of the three new README files

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Documentation
    • Added comprehensive documentation for client helper libraries covering installation, configuration, and usage examples.
    • Documented fetch-based and TanStack Query client integrations with code samples and framework support details.
    • Added guidance on shared building blocks for implementing custom clients.

Review Change Stack

Add README.md files for @zenstackhq/client-helpers, @zenstackhq/fetch-client,
and @zenstackhq/tanstack-query so the packages have a description on npm.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@claude

claudeBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

Claude finished @ymc9's task —— View job


PR Review: Client Package README Files

Reviewing the addition of README.md files for client packages.

Todo List:

  • Read the three new README.md files
  • Compare with existing README patterns in the repo
  • Analyze content quality and consistency
  • Check for accuracy and completeness
  • Provide comprehensive review feedback

Review Feedback

Overall, this is a well-executed PR that adds valuable documentation for the client packages. The README files follow good conventions and provide useful information for npm users. Here are my detailed findings:

Strengths

  1. Consistent Structure: All three READMEs follow a consistent pattern similar to existing packages (@zenstackhq/orm, @zenstackhq/server)
  2. Clear Descriptions: Each package has a concise, accurate description that matches their package.json descriptions
  3. Practical Examples: The fetch-client and tanstack-query READMEs include helpful code examples
  4. Documentation Links: All files include proper "Learn More" sections linking to relevant documentation

📝 Observations & Minor Suggestions

@zenstackhq/client-helpers (packages/clients/client-helpers/README.md:1-4):

  • ✅ Accurately describes this as shared building blocks for other clients
  • ✅ Good cross-references to fetch-client and tanstack-query packages
  • ⚠️Minor: This is quite minimal compared to others, but appropriate given it's primarily internal infrastructure

@zenstackhq/fetch-client (packages/clients/fetch-client/README.md:1-33):

  • ✅ Excellent code example showing both basic usage and transactions
  • ✅ Clear installation instructions
  • ✅ Good description highlighting it's "lightweight" and "type-safe"
  • ✅ Example imports and endpoint configuration are realistic

@zenstackhq/tanstack-query (packages/clients/tanstack-query/README.md:1-42):

  • ✅ Great overview of supported frameworks (React, Vue, Svelte)
  • ✅ Framework-specific installation example with peer dependencies
  • ✅ Practical React usage example showing hooks and mutations
  • ✅ Good note about replacing peer dependencies for different frameworks

🔍 Technical Accuracy

All code examples appear technically sound:

  • Import paths match the package exports in package.json
  • API usage aligns with ZenStack conventions
  • TanStack Query integration follows expected patterns
  • Documentation URLs are correct

📊 Consistency with Existing Patterns

The READMEs successfully match the style of existing packages:

  • Similar section ordering (description → installation → usage → learn more)
  • Consistent formatting and markdown usage
  • Appropriate level of detail for npm package pages
  • Proper cross-linking between related packages

🎯 Recommendations

  1. All good to go! These READMEs effectively serve their purpose of providing npm users with quick package understanding and usage examples.

  2. Consider for future: The client-helpers README could potentially benefit from a small usage example, but it's fine as-is since it's primarily for internal use.

Security & Best Practices

  • No security concerns
  • Examples follow ZenStack best practices
  • No hardcoded sensitive data or problematic patterns

Summary

This is a solid documentation improvement that will enhance the npm experience for users. The READMEs are well-written, accurate, and consistent with project conventions. Ready for merge

@coderabbitai

coderabbitaiBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 09c666a2-216f-4833-986b-33a099b487c7

📥 Commits

Reviewing files that changed from the base of the PR and between adb109b and cd86cdf.

📒 Files selected for processing (3)
  • packages/clients/client-helpers/README.md
  • packages/clients/fetch-client/README.md
  • packages/clients/tanstack-query/README.md

📝 Walkthrough

Walkthrough

This PR adds README documentation for three ZenStack client packages. It introduces client-helpers as the shared foundation, documents fetch-client as a lightweight type-safe fetch-based client with usage examples, and provides tanstack-query documentation covering frameworks and React hook integration.

Changes

Client Packages Documentation

Layer / File(s)Summary
Client package READMEs
packages/clients/client-helpers/README.md, packages/clients/fetch-client/README.md, packages/clients/tanstack-query/README.md
Added three READMEs documenting the client packages ecosystem: client-helpers describes shared building blocks for consuming ZenStack's CRUD service; fetch-client documents a lightweight fetch-based client with installation, createClient usage, CRUD operations, and $transaction examples; tanstack-query documents the TanStack Query integration with supported frameworks, setup instructions, and React hook usage examples.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A docs hop, a triple beat,
Three READMEs, clean and neat,
Clients helpers, fetch, and query too,
ZenStack's toolkit, shiny new!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe pull request title clearly and concisely summarizes the main change: adding README files for client packages.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/clients-readme

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ymc9
ymc9 merged commit a43dff5 into devMay 26, 2026
8 checks passed
@ymc9
ymc9 deleted the docs/clients-readme branch May 26, 2026 03:27
@coderabbitaicoderabbitaiBot mentioned this pull request May 26, 2026
Sign up for freeto 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.

1 participant

@ymc9
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

docs(clients): add README for client packages - #2683

Merged
ymc9 merged 1 commit into
devfrom
docs/clients-readme
May 26, 2026
Merged

docs(clients): add README for client packages#2683
ymc9 merged 1 commit into
devfrom
docs/clients-readme

Conversation

@ymc9

@ymc9ymc9 commented May 25, 2026

Copy link
Copy Markdown
Member

Summary

  • Add README.md for @zenstackhq/client-helpers, @zenstackhq/fetch-client, and @zenstackhq/tanstack-query so each package shows a description on npm.
  • Style matches the existing package READMEs (e.g. packages/orm, packages/server).

Test plan

  • Visual review of the three new README files

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Documentation
    • Added comprehensive documentation for client helper libraries covering installation, configuration, and usage examples.
    • Documented fetch-based and TanStack Query client integrations with code samples and framework support details.
    • Added guidance on shared building blocks for implementing custom clients.

Review Change Stack

Add README.md files for @zenstackhq/client-helpers, @zenstackhq/fetch-client,
and @zenstackhq/tanstack-query so the packages have a description on npm.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@claude

claudeBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

Claude finished @ymc9's task —— View job


PR Review: Client Package README Files

Reviewing the addition of README.md files for client packages.

Todo List:

  • Read the three new README.md files
  • Compare with existing README patterns in the repo
  • Analyze content quality and consistency
  • Check for accuracy and completeness
  • Provide comprehensive review feedback

Review Feedback

Overall, this is a well-executed PR that adds valuable documentation for the client packages. The README files follow good conventions and provide useful information for npm users. Here are my detailed findings:

Strengths

  1. Consistent Structure: All three READMEs follow a consistent pattern similar to existing packages (@zenstackhq/orm, @zenstackhq/server)
  2. Clear Descriptions: Each package has a concise, accurate description that matches their package.json descriptions
  3. Practical Examples: The fetch-client and tanstack-query READMEs include helpful code examples
  4. Documentation Links: All files include proper "Learn More" sections linking to relevant documentation

📝 Observations & Minor Suggestions

@zenstackhq/client-helpers (packages/clients/client-helpers/README.md:1-4):

  • ✅ Accurately describes this as shared building blocks for other clients
  • ✅ Good cross-references to fetch-client and tanstack-query packages
  • ⚠️Minor: This is quite minimal compared to others, but appropriate given it's primarily internal infrastructure

@zenstackhq/fetch-client (packages/clients/fetch-client/README.md:1-33):

  • ✅ Excellent code example showing both basic usage and transactions
  • ✅ Clear installation instructions
  • ✅ Good description highlighting it's "lightweight" and "type-safe"
  • ✅ Example imports and endpoint configuration are realistic

@zenstackhq/tanstack-query (packages/clients/tanstack-query/README.md:1-42):

  • ✅ Great overview of supported frameworks (React, Vue, Svelte)
  • ✅ Framework-specific installation example with peer dependencies
  • ✅ Practical React usage example showing hooks and mutations
  • ✅ Good note about replacing peer dependencies for different frameworks

🔍 Technical Accuracy

All code examples appear technically sound:

  • Import paths match the package exports in package.json
  • API usage aligns with ZenStack conventions
  • TanStack Query integration follows expected patterns
  • Documentation URLs are correct

📊 Consistency with Existing Patterns

The READMEs successfully match the style of existing packages:

  • Similar section ordering (description → installation → usage → learn more)
  • Consistent formatting and markdown usage
  • Appropriate level of detail for npm package pages
  • Proper cross-linking between related packages

🎯 Recommendations

  1. All good to go! These READMEs effectively serve their purpose of providing npm users with quick package understanding and usage examples.

  2. Consider for future: The client-helpers README could potentially benefit from a small usage example, but it's fine as-is since it's primarily for internal use.

Security & Best Practices

  • No security concerns
  • Examples follow ZenStack best practices
  • No hardcoded sensitive data or problematic patterns

Summary

This is a solid documentation improvement that will enhance the npm experience for users. The READMEs are well-written, accurate, and consistent with project conventions. Ready for merge

@coderabbitai

coderabbitaiBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 09c666a2-216f-4833-986b-33a099b487c7

📥 Commits

Reviewing files that changed from the base of the PR and between adb109b and cd86cdf.

📒 Files selected for processing (3)
  • packages/clients/client-helpers/README.md
  • packages/clients/fetch-client/README.md
  • packages/clients/tanstack-query/README.md

📝 Walkthrough

Walkthrough

This PR adds README documentation for three ZenStack client packages. It introduces client-helpers as the shared foundation, documents fetch-client as a lightweight type-safe fetch-based client with usage examples, and provides tanstack-query documentation covering frameworks and React hook integration.

Changes

Client Packages Documentation

Layer / File(s)Summary
Client package READMEs
packages/clients/client-helpers/README.md, packages/clients/fetch-client/README.md, packages/clients/tanstack-query/README.md
Added three READMEs documenting the client packages ecosystem: client-helpers describes shared building blocks for consuming ZenStack's CRUD service; fetch-client documents a lightweight fetch-based client with installation, createClient usage, CRUD operations, and $transaction examples; tanstack-query documents the TanStack Query integration with supported frameworks, setup instructions, and React hook usage examples.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A docs hop, a triple beat,
Three READMEs, clean and neat,
Clients helpers, fetch, and query too,
ZenStack's toolkit, shiny new!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe pull request title clearly and concisely summarizes the main change: adding README files for client packages.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/clients-readme

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ymc9
ymc9 merged commit a43dff5 into devMay 26, 2026
8 checks passed
@ymc9
ymc9 deleted the docs/clients-readme branch May 26, 2026 03:27
@coderabbitaicoderabbitaiBot mentioned this pull request May 26, 2026
Sign up for freeto 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.

1 participant

@ymc9
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

docs(clients): add README for client packages - #2683

Merged
ymc9 merged 1 commit into
devfrom
docs/clients-readme
May 26, 2026
Merged

docs(clients): add README for client packages#2683
ymc9 merged 1 commit into
devfrom
docs/clients-readme

Conversation

@ymc9

@ymc9ymc9 commented May 25, 2026

Copy link
Copy Markdown
Member

Summary

  • Add README.md for @zenstackhq/client-helpers, @zenstackhq/fetch-client, and @zenstackhq/tanstack-query so each package shows a description on npm.
  • Style matches the existing package READMEs (e.g. packages/orm, packages/server).

Test plan

  • Visual review of the three new README files

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Documentation
    • Added comprehensive documentation for client helper libraries covering installation, configuration, and usage examples.
    • Documented fetch-based and TanStack Query client integrations with code samples and framework support details.
    • Added guidance on shared building blocks for implementing custom clients.

Review Change Stack

Add README.md files for @zenstackhq/client-helpers, @zenstackhq/fetch-client,
and @zenstackhq/tanstack-query so the packages have a description on npm.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@claude

claudeBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

Claude finished @ymc9's task —— View job


PR Review: Client Package README Files

Reviewing the addition of README.md files for client packages.

Todo List:

  • Read the three new README.md files
  • Compare with existing README patterns in the repo
  • Analyze content quality and consistency
  • Check for accuracy and completeness
  • Provide comprehensive review feedback

Review Feedback

Overall, this is a well-executed PR that adds valuable documentation for the client packages. The README files follow good conventions and provide useful information for npm users. Here are my detailed findings:

Strengths

  1. Consistent Structure: All three READMEs follow a consistent pattern similar to existing packages (@zenstackhq/orm, @zenstackhq/server)
  2. Clear Descriptions: Each package has a concise, accurate description that matches their package.json descriptions
  3. Practical Examples: The fetch-client and tanstack-query READMEs include helpful code examples
  4. Documentation Links: All files include proper "Learn More" sections linking to relevant documentation

📝 Observations & Minor Suggestions

@zenstackhq/client-helpers (packages/clients/client-helpers/README.md:1-4):

  • ✅ Accurately describes this as shared building blocks for other clients
  • ✅ Good cross-references to fetch-client and tanstack-query packages
  • ⚠️Minor: This is quite minimal compared to others, but appropriate given it's primarily internal infrastructure

@zenstackhq/fetch-client (packages/clients/fetch-client/README.md:1-33):

  • ✅ Excellent code example showing both basic usage and transactions
  • ✅ Clear installation instructions
  • ✅ Good description highlighting it's "lightweight" and "type-safe"
  • ✅ Example imports and endpoint configuration are realistic

@zenstackhq/tanstack-query (packages/clients/tanstack-query/README.md:1-42):

  • ✅ Great overview of supported frameworks (React, Vue, Svelte)
  • ✅ Framework-specific installation example with peer dependencies
  • ✅ Practical React usage example showing hooks and mutations
  • ✅ Good note about replacing peer dependencies for different frameworks

🔍 Technical Accuracy

All code examples appear technically sound:

  • Import paths match the package exports in package.json
  • API usage aligns with ZenStack conventions
  • TanStack Query integration follows expected patterns
  • Documentation URLs are correct

📊 Consistency with Existing Patterns

The READMEs successfully match the style of existing packages:

  • Similar section ordering (description → installation → usage → learn more)
  • Consistent formatting and markdown usage
  • Appropriate level of detail for npm package pages
  • Proper cross-linking between related packages

🎯 Recommendations

  1. All good to go! These READMEs effectively serve their purpose of providing npm users with quick package understanding and usage examples.

  2. Consider for future: The client-helpers README could potentially benefit from a small usage example, but it's fine as-is since it's primarily for internal use.

Security & Best Practices

  • No security concerns
  • Examples follow ZenStack best practices
  • No hardcoded sensitive data or problematic patterns

Summary

This is a solid documentation improvement that will enhance the npm experience for users. The READMEs are well-written, accurate, and consistent with project conventions. Ready for merge

@coderabbitai

coderabbitaiBot commented May 25, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 09c666a2-216f-4833-986b-33a099b487c7

📥 Commits

Reviewing files that changed from the base of the PR and between adb109b and cd86cdf.

📒 Files selected for processing (3)
  • packages/clients/client-helpers/README.md
  • packages/clients/fetch-client/README.md
  • packages/clients/tanstack-query/README.md

📝 Walkthrough

Walkthrough

This PR adds README documentation for three ZenStack client packages. It introduces client-helpers as the shared foundation, documents fetch-client as a lightweight type-safe fetch-based client with usage examples, and provides tanstack-query documentation covering frameworks and React hook integration.

Changes

Client Packages Documentation

Layer / File(s)Summary
Client package READMEs
packages/clients/client-helpers/README.md, packages/clients/fetch-client/README.md, packages/clients/tanstack-query/README.md
Added three READMEs documenting the client packages ecosystem: client-helpers describes shared building blocks for consuming ZenStack's CRUD service; fetch-client documents a lightweight fetch-based client with installation, createClient usage, CRUD operations, and $transaction examples; tanstack-query documents the TanStack Query integration with supported frameworks, setup instructions, and React hook usage examples.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A docs hop, a triple beat,
Three READMEs, clean and neat,
Clients helpers, fetch, and query too,
ZenStack's toolkit, shiny new!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe pull request title clearly and concisely summarizes the main change: adding README files for client packages.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/clients-readme

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ymc9
ymc9 merged commit a43dff5 into devMay 26, 2026
8 checks passed
@ymc9
ymc9 deleted the docs/clients-readme branch May 26, 2026 03:27
@coderabbitaicoderabbitaiBot mentioned this pull request May 26, 2026
Sign up for freeto 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.

1 participant

@ymc9