Align crm-app with msw-todo pattern for frontend-first development #257
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Update crm-app to msw loading mode for API testing
Align crm-app with msw-todo pattern for frontend-first development
Jan 29, 2026
- Add eslint-plugin-storybook to fix lint errors - Fix import path in msw-todo (use correct package name) - Add exports field to todo package for config file - Add plugin-form and plugin-grid to pretest build steps Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…k 8.x Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
📦 Bundle Size Report
Size Limits
|
📦 Bundle Size Report
Size Limits
|
|
✅ All checks passed!
|
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
📦 Bundle Size Report
Size Limits
|
|
✅ All checks passed!
|
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
|
Deployment failed with the following error: View Documentation: https://vercel.com/docs/accounts/team-members-and-roles |
|
Deployment failed with the following error: View Documentation: https://vercel.com/docs/accounts/team-members-and-roles |
|
Deployment failed with the following error: View Documentation: https://vercel.com/docs/accounts/team-members-and-roles |
📦 Bundle Size Report
Size Limits
|
|
✅ All checks passed!
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR aligns the crm-app example with the msw-todo pattern so both can be run and debugged entirely from the frontend against an in-browser ObjectStack runtime, and tightens Storybook/testing tooling around these flows.
Changes:
- Enabled MSW-powered in-browser ObjectStack kernels for
crm-appin all modes (not just development), matching themsw-todobootstrap pattern and adding robust startup error handling. - Updated build and tooling config (Vite, Storybook, ESLint plugins, test-runner) plus Storybook stories to use the real
@object-ui/reactruntime and to support MSW scenarios cleanly. - Added detailed documentation (
README.md,QUICKSTART.md) for thecrm-appMSW workflow and wired example packages (@object-ui/example-crm,@object-ui/example-todo) for direct consumption by the MSW examples.
Reviewed changes
Copilot reviewed 16 out of 17 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
pnpm-lock.yaml |
Syncs lockfile to include new dev tooling (eslint-plugin-storybook, @storybook/csf, updated Jest/esbuild wiring, vitest snapshot metadata) required by the Storybook test-runner and ESLint plugin additions. |
packages/components/src/ui/sidebar.tsx |
Adjusts SidebarMenuSkeleton to use useState for a stable random width per instance instead of useMemo, changing core UI primitive logic in the sidebar skeleton. |
packages/components/src/stories-json/page.stories.tsx |
Switches JSON-based Page story to use SchemaRenderer and SchemaRendererProvider from @object-ui/react, ensuring stories exercise the real runtime with an explicit dataSource. |
packages/components/src/stories-json/object-view.stories.tsx |
Same as above for Object View stories: they now render via SchemaRendererProvider and SchemaRenderer from @object-ui/react with a dummy dataSource. |
packages/components/src/stories-json/object-grid.stories.tsx |
Same pattern for Object Grid JSON stories, wiring through SchemaRendererProvider and the runtime renderer. |
packages/components/src/renderers/data-display/statistic.tsx |
Clarifies the dynamic Lucide icon lookup with @ts-expect-error and an ESLint disable comment so the renderer can safely resolve arbitrary icon names at runtime. |
packages/components/src/custom/native-select.tsx |
Adds an explicit eslint-disable-next-line @typescript-eslint/no-empty-object-type for the empty NativeSelectProps interface to keep linting clean while retaining the flexible prop surface. |
packages/components/src/SchemaRenderer.tsx |
Documents and lint-suppresses the dynamic component resolution from the registry when rendering <Component />, making the intent explicit to ESLint. |
package.json |
Extends the top-level pretest pipeline to build @object-ui/plugin-form and @object-ui/plugin-grid, and adds eslint-plugin-storybook as a devDependency for Storybook-specific linting rules. |
examples/todo/package.json |
Marks the todo example package as ESM and adds an export for ./objectstack.config, enabling imports like @object-ui/example-todo/objectstack.config from other workspaces (e.g., msw-todo). |
examples/msw-todo/src/mocks/browser.ts |
Points the MSW kernel at @object-ui/example-todo/objectstack.config (matching the package name/exports) instead of the old @objectstack/example-todo path. |
examples/msw-todo/src/main.tsx |
Wraps the async bootstrap() call in a .catch with a simple fatal error UI, aligning the error-handling pattern with crm-app while still starting MSW before rendering. |
examples/crm-app/vite.config.ts |
Adds optimizeDeps includes for MSW and ObjectStack spec packages plus build/rollupOptions tweaks to handle CommonJS and suppress a known optional @objectstack/driver-memory dynamic import warning, matching the msw-todo setup. |
examples/crm-app/src/main.tsx |
Simplifies and hardens the bootstrap: always starts the MSW mock server (all modes), then initializes the ObjectStack client, and adds a fatal error fallback UI identical to msw-todo. |
examples/crm-app/README.md |
Introduces comprehensive documentation for the crm-app MSW architecture and flow: browser → MSW → ObjectStack Kernel → in-memory driver, client wiring, seeding, and how to migrate the configuration to production backends. |
examples/crm-app/QUICKSTART.md |
Adds a step-by-step quickstart detailing how to run the CRM demo, inspect MSW/kernel logs, modify schema/data, and debug API calls and mocked data flows. |
.storybook/test-runner.ts |
Configures Storybook test-runner with a preVisit hook that sets window.__test = true in the browser context to avoid __test is not defined errors during story smoke tests. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| } | ||
|
|
||
| // This is dynamic component resolution from registry, not component creation during render | ||
| // eslint-disable-next-line |
There was a problem hiding this comment.
Using a bare /* eslint-disable-next-line */ here disables all rules on this line, which can mask unrelated lint issues later. To keep ESLint coverage tight and consistent with the rest of the codebase (e.g. page.tsx and native-select.tsx), consider scoping this to the specific rule you need to suppress (such as the React "no component in render" rule) instead of a blanket disable.
Suggested change
| // eslint-disable-next-line | |
| // eslint-disable-next-line react/no-unstable-nested-components |
| </p> | ||
| )} | ||
| {/* Dynamic icon resolution from Lucide, not component creation during render */} | ||
| {/* eslint-disable-next-line */} |
There was a problem hiding this comment.
Similar to SchemaRenderer.tsx, this uses a bare /* eslint-disable-next-line */, which disables all lint rules for the JSX line. For maintainability, it would be better to target the specific rule you’re intentionally bypassing (e.g. the React rule about components created in render) so that other potential problems on this line are still caught by ESLint.
Suggested change
| {/* eslint-disable-next-line */} | |
| {/* eslint-disable-next-line react/no-unstable-nested-components */} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The crm-app example had MSW infrastructure but lacked documentation and runtime parity with msw-todo. Developers couldn't easily use it for frontend debugging without a backend.
Changes
main.tsx- now runs in all modes like msw-todovite.config.tsfor proper browser bundlingBefore/After
Both examples now use identical pattern: Browser → MSW Service Worker → ObjectStack Kernel (in-memory) → InMemoryDriver
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.