Refactor web-shared to separate UI components from server concerns#927
Refactor web-shared to separate UI components from server concerns#927karthikscale3 merged 18 commits intomainfrom
Conversation
…-props-traceviewer
- Move UI components into src/components/ subdirectory - Move server actions and API client to @workflow/web - Add world-actions/ module with shared helpers (recreateRun, cancelRun, etc.) - Add runtime subpath exports to @workflow/core - Components now accept callbacks as props for data fetching
🦋 Changeset detectedLatest commit: 84e167e The changes in this PR will be included in the next version bump. This PR includes changesets to release 16 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📊 Benchmark Results
workflow with no steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) workflow with 1 step💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) workflow with 10 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Express | Nitro workflow with 25 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) workflow with 50 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) Promise.all with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) Promise.all with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Next.js (Turbopack) | Nitro Promise.all with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) Promise.race with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Next.js (Turbopack) | Express Promise.race with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) Promise.race with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Next.js (Turbopack) | Nitro Stream Benchmarks (includes TTFB metrics)workflow with stream💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) SummaryFastest Framework by WorldWinner determined by most benchmark wins
Fastest World by FrameworkWinner determined by most benchmark wins
Column Definitions
Worlds:
|
🧪 E2E Test Results❌ Some tests failed Summary
❌ Failed Tests🌍 Community Worlds (169 failed)mongodb (42 failed):
redis (42 failed):
starter (43 failed):
turso (42 failed):
Details by Category✅ ▲ Vercel Production
✅ 💻 Local Development
✅ 📦 Local Production
✅ 🐘 Local Postgres
✅ 🪟 Windows
❌ 🌍 Community Worlds
✅ 📋 Other
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
…-props-traceviewer
…-props-traceviewer
|
@claude can you review this and leave inline review comments please |
|
Claude encountered an error —— View job I'll analyze this and get back to you. |
There was a problem hiding this comment.
Pull request overview
This PR refactors @workflow/web-shared to separate UI components from server-side code, creating a cleaner architecture where:
@workflow/web-sharedbecomes a pure UI component library with prop-based callbacks@workflow/webcontains all server actions and API client code@workflow/coreadds runtime subpath exports for direct module imports
Changes:
- Moved server actions from
web-sharedtoweb - Converted components to accept callbacks as props instead of environment variables
- Added world operation helpers to
@workflow/core/runtime - Removed
serversubpackage fromweb-shared
Reviewed changes
Copilot reviewed 38 out of 71 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Updated dependencies, switched workspace packages to specific versions |
| packages/web/src/server/workflow-server-actions.ts | Consolidated server actions, uses runtime helpers from core |
| packages/web/src/lib/workflow-api-client.ts | Enhanced with hook fetching and conditional data loading |
| packages/web/src/components/*.tsx | Updated to use local server actions and pass callbacks to UI components |
| packages/web-shared/src/components/*.tsx | Refactored to pure UI components accepting data and callbacks |
| packages/core/src/runtime/runs.ts | New shared helper functions for world operations |
| packages/core/package.json | Added runtime subpath exports |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (3)
packages/web/src/lib/workflow-api-client.ts:1040
- The
enabledoption defaults totruebut the loading state is initialized with this value directly. This means that whenenabledisfalse, the component still briefly shows a loading state. Consider initializingloadingstate withfalsewhenenabledisfalsefrom the start.
packages/web-shared/src/components/sidebar/events-list.tsx:5 - The import path includes
.jsextension in'../trace-viewer/types.js'while other imports don't use extensions. This inconsistency could cause issues with some TypeScript/bundler configurations. Consider removing the.jsextension for consistency with other imports in the file.
packages/web/src/server/workflow-server-actions.ts:52 - The function
createVercelWorldis being redefined locally when@workflow/world-vercelalready exports this function. This creates code duplication and maintenance burden. Consider importing and using the existing function from the package instead of reimplementing it.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Aligned that this will be iterated in the next phase. |
…-props-traceviewer
…-props-traceviewer
| * Ensures the workflow name only contains safe characters before | ||
| * interpolating it into the queue name string. | ||
| */ | ||
| export function getWorkflowQueueName(workflowName: string): ValidQueueName { |

Summary
@workflow/web-sharedto be a pure UI component library by moving server-side code to@workflow/webworld-actions/module with shared world operation helpers that don't depend on Next.js server actions@workflow/corefor direct module importsChanges
@workflow/web-shared
src/components/subdirectory@workflow/web)serversubpackageonSpanSelect,onWakeUpSleep,onResolveHook) instead of directly calling server actions@workflow/web
src/server/workflow-server-actions.tswith all server actionssrc/lib/workflow-api-client.tsfor client-side API wrappersrc/lib/hooks/use-stream-reader.tshook@workflow/core
./runtime/start,./runtime/helpers,./runtime/resume-hookruns.tsmodule with shared helpers (recreateRunFromExisting,cancelRun,reenqueueRun,wakeUpRun)Test plan
Local o11y
Vercel o11y