feat(music): add initial Music Lab implementation #69919
Conversation
3142e9b to
14e3828
Compare
6ea226b to
f866ee6
Compare
14e3828 to
d9de2cf
Compare
f866ee6 to
94f7f3c
Compare
d9de2cf to
379a912
Compare
8433eb0 to
33e91e3
Compare
There was a problem hiding this comment.
Pull request overview
This PR introduces the Music Lab feature as a new modular, lazy-loaded package within the frontend workspace. The implementation creates a dedicated @code-dot-org/music-lab package with its own build configuration and integrates it into the studio app through dynamic imports and route-based code splitting.
Key Changes:
- Created a new
@code-dot-org/music-labpackage with React-based implementation, Vite build configuration, and TypeScript setup - Implemented lazy-loading infrastructure for labs with
getLabEntrypoint.tsand type-safe lab definitions - Updated routing to support
/projects/$labType/$channelId/editwith dynamic lab component loading
Reviewed changes
Copilot reviewed 19 out of 20 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/packages/labs/music/package.json | Defines the new music-lab package with dependencies and build scripts |
| frontend/packages/labs/music/vite.config.ts | Configures Vite for library build with React support and dependency externalization |
| frontend/packages/labs/music/src/App.tsx | Basic Music Lab React component with placeholder UI |
| frontend/packages/labs/music/tsconfig*.json | TypeScript configuration files for the music-lab package |
| frontend/apps/studio/src/routes/projects/$labType/$channelId/edit.tsx | Updated route to lazy-load lab entrypoints based on labType parameter |
| frontend/apps/studio/src/modules/labs/router/getLabEntrypoint.ts | Maps lab types to their lazy-loaded entrypoint components |
| frontend/apps/studio/src/modules/labs/types/lab.ts | Defines Lab type and type guard for runtime validation |
| frontend/apps/studio/src/modules/labs/config/labs.ts | Configuration of available labs in the application |
| frontend/package.json | Adds music-lab package to workspace configuration |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <meta charset="UTF-8" /> | ||
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>music</title> |
There was a problem hiding this comment.
The page title 'music' should be capitalized to 'Music Lab' for consistency with the application name shown in App.tsx and better user experience.
| <title>music</title> | |
| <title>Music Lab</title> |
379a912 to
a3cf212
Compare
This commit introduces the initial implementation of Music Lab. It includes a dedicated frontend package, lazy-loaded entrypoints, and initial integration with lab infrastructure. The changes ensure that the Music Lab is modular and code-split. The commit also includes updates to the workspace configuration, routing, and TypeScript settings to support the new Music Lab package. - **Added** `@code-dot-org/music-lab` package with initial React-based implementation. - **Updated** `package.json` and `yarn.lock` to include the new Music Lab package and dependencies. - **Created** `AVAILABLE_LABS` configuration to register the Music Lab. - **Implemented** lazy-loaded entrypoints for labs in `getLabEntrypoint.ts`. - **Added** type definitions and type guard for labs in `lab.ts`. - **Updated** routing to support `/projects/$labType/$channelId/edit` for Music Lab. - **Configured** Vite, ESLint, and TypeScript for the Music Lab package. - **Added** `.gitignore` and `.lintstagedrc.mjs` for the Music Lab package. - **Created** basic `App.tsx` and `main.tsx` for the Music Lab UI.
33e91e3 to
ab2eaa3
Compare
| "lint": "eslint .", | ||
| "preview": "vite preview" | ||
| }, | ||
| "devDependencies": { |
There was a problem hiding this comment.
Are we going to have to maintain lists like this for many labs? This was one of the pain points in our separate lab repos.
There was a problem hiding this comment.
Great question! Short answer is no.
Once I have this PR and #69987 merged, we will have multiple packages that are built using the same bundler, linters, etc. This will provide us a basis for the follow up work that @wilkie has been experimenting with a feature called Catalogs (yarn version) (pnpm version) which will convert all of these versions to
"react": "catalog:",
We will then manage the catalog at the root at frontend/.yarnrc.yml or frontend/pnpm-workspaces.yml. So no more mess of dependencies, we will have one consistent location!
There was a problem hiding this comment.
Yep. They will be pulled via the catalog and thus updated together.
🖼️ Storybook Visual Comparison Report✅ No Storybook eyes differences detected! |
wilkie
left a comment
There was a problem hiding this comment.
This makes sense and deja vu from my own test application where I was lazily loading the different lab packages! Looks good there and very forward-thinking!
I'm curious what we could do to eventually determine the available labs. Presumably they will be known via what exists in frontend/packages/labs/* and/or what is listed in the studio package.json as dependencies. But this is very reasonable.
We should probably toss in another lab to ensure we keep in mind a good DevEx for multiple labs. My guess is that we can have the router, since it is dynamic, to load available labs based on a configuration file. |
This commit introduces the initial implementation of Music Lab.
It includes a dedicated frontend package, lazy-loaded entrypoints, and initial integration with lab infrastructure. The changes ensure that the Music Lab is modular and code-split.
The commit also includes updates to the workspace configuration, routing, and TypeScript settings to support the new Music Lab package.
The purpose of this PR is to enable the student learning team to start experimenting with getting lab2 up and running in the vite experiment while further modularization and foundational elements continue to occur in parallel.
Changes
@code-dot-org/music-labpackage with initial React-based implementation.package.jsonandyarn.lockto include the new Music Lab package and dependencies.AVAILABLE_LABSconfiguration to register the Music Lab.getLabEntrypoint.ts.lab.ts./projects/$labType/$channelId/editfor Music Lab..gitignoreand.lintstagedrc.mjsfor the Music Lab package.App.tsxandmain.tsxfor the Music Lab UI.